Question

我正在开发基于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

Answer 1

您已经在两个不同的模块中声明了 BottombarComponent 和 TopbarComponent 。因此，它会导致错误。

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

如果您打算在不同的模块中重用该组件，则应将它们包装到单个模块中，然后将其导出到 export array 中。

在这里，您应按如下所示创建 dependency module

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

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

一旦添加更多声明，RouterLink将停止工作

1 个答案: