无法绑定到 'routerLink'，因为它不是 'a' 的已知属性。

15 浏览
0 Comments

无法绑定到 'routerLink'，因为它不是 'a' 的已知属性。

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

    
            
            {{widget.BadgeNumber}}
        
{{widget.Text}}

错误出现在routerlink上。错误信息如下：

无法将'routerLink'绑定到'a'的未知属性。 ("
        ][routerLink]="['/Tile', widget.WidgetRoute.Feature, widget.WidgetRoute.SubFeature]">
            
                
                ]*ngIf="widget.BadgeNumber > 0" class="badge">{{widget.BadgeNumber}}
     "): LdrComponent@7:22

对我来说，routerLink似乎没有格式错误... 我做错了什么？

0

2 答案

0 Comments

原因：出现这个问题的原因是因为在模板中使用了`routerLink`属性，但是该属性不是`a`标签的已知属性。

解决方法：根据错误信息，我们可以确定问题出现在`routerLink`属性上。要解决这个问题，我们可以按照以下步骤进行操作。

首先，我们需要确认是否已经正确引入了`RouterModule`。在`app.module.ts`文件中，我们需要导入`RouterModule`模块，并将其添加到`imports`数组中。示例如下：

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  ...
})
export class AppModule { }

其中，`routes`是我们定义的路由配置数组。

接下来，我们需要在模板中正确使用`routerLink`属性。确保`routerLink`的值是一个有效的路由路径。示例如下：

Link

在这个示例中，`/path`是一个有效的路由路径，你可以根据自己的需求进行修改。

通过正确导入`RouterModule`模块，并在模板中正确使用`routerLink`属性，我们可以解决`Can't bind to 'routerLink' since it isn't a known property of 'a'`问题。

0
0 Comments

问题出现的原因是忘记在NgModule组件中添加RouterModule。在RC版本中，这是通过({directives: [ROUTER_DIRECTIVES]})添加的，然而，现在已经移动到({imports: [RouterModule]})中。

当定义路由时，你将导入的组件之一将是你将用于调用forRoot或forChild的RouterModule。当导入路由时，这将自动导入。

所以，你可以通过这种方式获取RouterLink，或通过直接导入到imports属性中获取。

我已经将RouterModule导入到我的主要AppModule中，然后我也将一些子模块导入到我的主要AppModule中。我认为既然我在AppModule级别导入了RouterModule，它应该在任何地方都可以使用。是这样吗？

不，declarations不会继承，这包括组件、指令和管道。如果你需要在一个模块中使用它们中的任何一个，那么你需要将包含模块导入到该模块中。就是这样。

好的，谢谢，事实证明我需要在它们自己的路由配置文件中定义我的模块路由，并将其导入到每个模块中。现在好像可以工作了。谢谢你指引我走正确的道路。

不客气。:-)

嗨，我遇到了同样的问题，你能详细说明你是如何解决的吗？

看一下angular.io上的这个链接：angular.io/guide/router

我在没有正确解决的情况下找到了这个错误1000次。如果你使用webpack，默认情况下Angular会出现这个错误！这是由于html-loader中的html-minifier导致属性转换为小写！在html-loader选项中添加caseSensitive: true。参见：github.com/SamanthaAdrichem/webpack-3.9.1-splitted-config-angular，了解一个运行良好的angular 5 + webpack 3.9配置。

0