无法绑定到“routerLink”，因为它不是“a”的已知属性 [重复]

Posted 2023-03-13

【中文标题】无法绑定到“routerLink”，因为它不是“a”的已知属性 [重复]

【英文标题】：Can't bind to 'routerLink' since it isn't a known property of 'a' [duplicate]

【发布时间】：2017-02-05 16:10:31

【问题描述】：

我正在将我们的一个应用程序从 rc4 更新到 angular2.0.0，并且在运行时出现模板解析错误。这是我的视图模板：

<div *ngFor="let widget of widgets" class="col-xs-3 quick-link">
    <a [routerLink]="['/Tile', widget.WidgetRoute.Feature, widget.WidgetRoute.SubFeature]">
        <div class="tile-icon">
            <span [className]="widget.IconCssClass"></span>
            <span *ngIf="widget.BadgeNumber > 0" class="badge">widget.BadgeNumber</span>
        </div>
        <h4>widget.Text</h4>
    </a>
</div>

并且错误是在路由器链接上。这是错误：

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

    <div *ngFor="let widget of widgets" class="col-xs-3 quick-link">
        <a [ERROR ->][routerLink]="['/Tile', widget.WidgetRoute.Feature, widget.WidgetRoute.SubFeature]">
            <di"): LdrComponent@4:19
Can't bind to 'ngIf' since it isn't a known property of 'span'. ("tile-icon">
                <span [className]="widget.IconCssClass"></span>
                <span [ERROR ->]*ngIf="widget.BadgeNumber > 0" class="badge">widget.BadgeNumber</span>
            </div>
     "): LdrComponent@7:22

在我看来，routerLink 的格式并不错误...我做错了什么？

【问题讨论】：

您正在使用的Angular 2 版本？

Angular 2.0.0 第一个发布版本

【参考方案1】：

问题是您忘记将RouterModule 添加到您的NgModule 组件中。在 RC 中，这已添加到 @Component(directives: [ROUTER_DIRECTIVES])，但是，现在已移至 @NgModule( imports: [RouterModule])。

定义路由时，您将导入的组件之一是RouterModule，您将使用它来调用forRoot 或forChild。当您导入路线时，它将自动导入。

因此，您将通过这种方式获得 RouterLink，或者直接导入到 @NgModule 的 imports 属性中。

【讨论】：

我已将 RouterModule 导入到我的主 AppModule 中，然后我将一些子模块也导入到我的主 AppModule 中。我认为由于我在 AppModule 级别导入了 RouterModule，因此它可以在任何地方使用。不是这样吗？

@cobolstinks no，declarations 不被继承，这包括组件、指令和管道。如果您需要在模块中使用其中任何一个，则需要将包含模块导入该模块。就是这样。

好的，谢谢，事实证明我需要在他们自己的路由配置文件中定义我的模块路由并将其导入每个模块。它现在似乎起作用了。感谢您让我走上正确的道路。

@cobolstinks 欢迎您。 :-)

在没有正确解决方案的情况下，我已发现此错误 1.000 次。如果你使用 webpack。 Angular 在默认生产中出现此错误！这是由于 html-loader 中的 html-minifier，导致属性被转换为小写！将 caseSensitive: true 添加到 html-loader 选项请参阅：github.com/SamanthaAdrichem/webpack-3.9.1-splitted-config-angular 以获取工作角度 5 + webpack 3.9 配置

【参考方案2】：

自 rc-4 以来，某些语法发生了变化，尤其是在您未使用路由器 3.0 时。

在此处关注 RouterLink 部分。

https://angular.io/docs/ts/latest/guide/router.html

几乎没有其他要检查的事情是设置 app.module.ts 的 Configuration 部分。

希望这能让你朝着正确的方向前进！