RouterLink в сборнике рассказов?

Я пытаюсь добавить свой компонент в Storybook, и он выдает ошибку, связанную с RouterLink, и он не является частью компонентов Ionic.

 Error: Template parse errors:
 Can't bind to 'routerLink' since it isn't a known property of 'ion-card'.
 1. If 'ion-card' is an Angular component and it has 'routerLink' input, 
 then verify that it is part of this module.
 2. If 'ion-card' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to 
 the '@NgModule.schemas' of this component to suppress this message.
 3. To allow any property add 'NO_ERRORS_SCHEMA' to the 
 '@NgModule.schemas' of this component. ("<ion-app>

Я могу импортировать любые элементы, которые не используют routerLink, однако любые, которые вызывают эту ошибку, если я не удалю ее. Как я могу добавить это в сборник рассказов, поскольку это не должно быть так сложно, как я думал?

Мой код в Storybook следующий:

 .add('Whole feed', () => (
    {
      template:
        `
        <ion-card class="ion-no-margin feedCard" [routerLink]="['./', feedItem.id]">
        <!-- loop though all recipies in recipies.page.ts module.-->
        <ion-img class="feedCard__img" [src]="feedItem.imageUrl"></ion-img><!-- [isPropertybinding] in this context-->
        <div class="feedCard__img--circles">
          <ion-icon name="radio-button-off"></ion-icon>
          <ion-icon name="radio-button-off"></ion-icon>
          <ion-icon name="radio-button-off"></ion-icon>
        </div>
      </ion-card>
      <div class="feedCard__label">
        <ion-label> {{ feedItem.title }} </ion-label>
        <!-- string interprelation -->
        <ion-label><strong> {{ feedItem.distance }}km </strong></ion-label> <!-- string interprelation -->
      </div>
      `,
              props: {
           },
         }))

Другие элементы работают, и Ionic поддерживает нормально, пока я удаляю какие-либо биты, которые ему не нравятся, он работает.

Как я могу включить RouterLink в Storybook или заставить его игнорировать проблему? Мне не нужны ссылки для работы, просто чтобы отображать компонент.

Мой файл app.modules.ts:

import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

angular storybook angular-routerlink
person David Hirst    schedule 18.06.2019    source источник
comment
Можешь показать нам свой app.module.ts ?   -  person asimhashmi    schedule 18.06.2019
comment
Я добавил это :)   -  person David Hirst    schedule 20.06.2019

Ответы (1)


arrow_upward
-1
arrow_downward

Чтобы использовать routerLink, вам нужно добавить RouterModule к каждому @NgModule(), который использует ваш компонент, в котором используется routerLink.

Предполагая, что ваш компонент используется только в AppModule, вам нужно добавить RouterModule к импорту вашего AppModule

Ваш код будет таким:

import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy, RouterModule } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, RouterModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}
person asimhashmi    schedule 20.06.2019
comment
Это не решило. Когда я восстановил [routerLink], он начал выдавать ту же ошибку, что и раньше. Я временно решил это, полностью удалив его, хотя это не очень хорошее долгосрочное решение. - person David Hirst; 20.06.2019