无法绑定到“routerLink”，因为即使在导入 RouterModule 之后它也不是已知属性

Posted 2023-02-19

【中文标题】无法绑定到“routerLink”，因为即使在导入 RouterModule 之后它也不是已知属性

【英文标题】：Can't bind to 'routerLink' since it isn't a known property even after importing RouterModule

【发布时间】：2021-10-16 14:10:43

【问题描述】：

我有一个简单的组件

<p>selector works!</p>
<a [routerLink]="['../']">
    <i class="material-icons">arrow_back</i>
</a>

应该包括一个后退按钮。但是我得到了错误

Can't bind to 'routerLink' since it isn't a known property of 'a'

即使 RouterModule 被导入到声明 selector.component 的模块中

@NgModule(
  declarations: [
    SelectorComponent
  ],
  imports: [
    CommonModule,
    RouterModule
  ]
)
export class MyModule  

问题可以通过在app.module中导入MyModule来解决。

为什么会这样？

【参考方案1】：

您需要通过调用RouterModule 的forRoot 或forChild 方法来导入模块。

@NgModule(
  declarations: [
    SelectorComponent
  ],
  imports: [
    CommonModule,
    RouterModule.forRoot([]), // with array of routes 
  ]
)

【讨论】：

为什么只导入RouterModule还不够？

我不知道好的文档可以给出明确的答案。调查angular.io/api/router/RouterModule#description 我可以推断这确保每个应用程序只提供一次路由器

为什么只导入RouterModule还不够？ -> 因为 Angular 必须知道路由是根路由还是子路由。

如果不需要为模块设置路由？

【参考方案2】：

如果您的选择器组件是任何其他模块的一部分。

您也应该在导入数组中导入RouterModule。

否则

检查是否正确导入selector组件

【讨论】：

为什么需要在 AppModule 中导入 MyModule？

如果您要使用的不仅仅是路由器插座。带有不同的模块。需要导入它。在 appmodule- 你将使用forRoot |对于子模块，您必须使用 forChild

我明白了，但为什么呢？看起来有些模块和 realted 指令不包含在其他模块中声明的组件中，除非在 AppModule 中导入了声明模块

你是对的，这取决于包发布者。如果您想创建新模块，您可以在其中导入所有必需的包并使用forRoot 将该模块导入 app.module 一次。所以它将可用于所有模块