一旦添加了更多声明，RouterLink 就会停止工作答案

【问题标题】：RouterLink stops working once more declarations are added一旦添加了更多声明，RouterLink 就会停止工作
【发布时间】：2019-05-20 01:32:56
【问题描述】：

我正在开发基于 Angular 的 Ionic 应用程序的早期示例。它应该在不同的页面之间导航，并根据上下文显示各种内容。

我为主页的一个对象分配了一个 routerLink 动态属性。一切都在相应地工作，每次单击对象时浏览器都会重定向到目标页面。

目标页面是一个名为“组件”的离子页面。

一旦我向目标页面添加了一个名为“BottombarComponent”的组件，链接到 routerLink 的对象就会停止重定向到该页面。但是，您仍然可以通过它的路径访问它。

我已经尝试了我能想象到的一切。我还是 Angular 的新手。

这是“组件”页面的模块。

//[...]
import { ComponentPage } from './component.page';
import { BottombarComponent } from '../dependency/bottombar/bottombar.component';


@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: ComponentPage
      }
    ])
  ],
  declarations: [
    ComponentPage,
    BottombarComponent // this line is what throws the issue
  ]
})

这是引用“组件”页面的 HTML 对象：

<ion-card [routerLink]="['/component']">
    <ion-card-header>
      <ion-card-title>Guia de Conceitos</ion-card-title>
    </ion-card-header>
    <ion-item>
      <ion-icon name="arrow-dropright-circle" slot="start"></ion-icon>
      <ion-label>Índice de todos os conceitos abrangidos</ion-label>
      <ion-button fill="outline" slot="end">ABRIR</ion-button>
    </ion-item>

    <ion-card-content>
      Descrição...
    </ion-card-content>
  </ion-card>

谁能帮我理解怎么回事？

Github 项目参考：https://github.com/misaelvergara/Syntaxe

【问题讨论】：

标签： angular typescript ionic-framework

【解决方案1】：

您一直在两个不同的模块中声明 BottombarComponent 和 TopbarComponent。所以，它会导致错误。

注意：您应该在单个模块中声明一个组件。

如果您想在不同的模块中重用组件，您应该将它们包装到单个模块中并将它们导出到 export array。

here 在您的情况下，您应该创建 dependency module，如下所示

@NgModule({
  declarations: [TopbarComponent, BottombarComponent],
  imports: [
    CommonModule,
    IonicModule
  ],
  exports: [
    BottombarComponent,
  ]
})
export class DependencyModule { }

之后，您在模块中重用了哪些组件，只需导入 dependency module。就是这样，它会解决你的问题

【讨论】：

很高兴为您提供帮助！