故事书中的RouterLink?

时间:2019-06-18 14:27:37

标签: angular storybook angular-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中,因为我应该不会这么想?

我在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 {}

1 个答案:

答案 0 :(得分:0)

要使用df[~df.director.str.contains("|",regex=False)] ,需要向每个使用 id popularity budget Cast director 0 135397 32.985763 150000000 Chris Pratt|Irrfan Khan Colin Trevorrow 1 76341 28.419936 150000000 Tom Hardy|Charlize Theron George Miller 的组件的routerLink添加RouterModule

假设您的组件仅在AppModule中使用,则需要将@NgModule()添加到routerLink的导入中

您的代码将如下所示:

RouterModule