2

我正在尝试将我的组件添加到 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 {}
4

1 回答 1

-1

为了使用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 {}
于 2019-06-20T07:43:00.137 回答