模板解析错误:无法绑定到“routerLink”,因为它不是“a”的已知属性 [重复]

Posted

技术标签:

【中文标题】模板解析错误:无法绑定到“routerLink”,因为它不是“a”的已知属性 [重复]【英文标题】:Template parse errors: Can't bind to 'routerLink' since it isn't a known property of 'a' [duplicate] 【发布时间】:2017-05-07 05:07:21 【问题描述】:

我正在创建一个组件,然后将其设置为根组件,然后我收到错误 Template parse errors: Can't bind to 'routerLink' since it isn't a known property of 'a'. 我在组件注释中使用 RouterLink 作为指令,但它无法工作。

app.routes.ts

import  ModuleWithProviders   from '@angular/core';
import  Routes, RouterModule  from '@angular/router';
import  dogRoutes     from './Dogs/dog.routes';
import  catRoutes     from './Cats/cat.routes';
import userRoutes from "./Users/user.routes";
// Route Configuration
export const routes: Routes = [
  
    path: '',
    redirectTo: '/dogs',
    pathMatch: 'full'
  ,
  ...catRoutes,
  ...dogRoutes,
  ...userRoutes
];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

app.component.ts

import  Component  from '@angular/core';

@Component(
  selector: 'my-app',
  template: `
  <div class="demo-layout-transparent mdl-layout mdl-js-layout">
  <header class="mdl-layout__header mdl-layout__header--transparent">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">Scotch Pets</span>
      <!-- Add spacer, to align navigation to the right -->
      <div class="mdl-layout-spacer"></div>
      <!-- Navigation with router directives-->
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link" [routerLink]="['/']">Home</a>
        <a class="mdl-navigation__link" [routerLink]="['/cats']">Cats</a>
        <a class="mdl-navigation__link" [routerLink]="['/dogs']">Dogs</a>
        <a class="mdl-navigation__link" [routerLink]="['/login']">Login</a>
      </nav>
    </div>
  </header>
  <main class="mdl-layout__content">
    <h1 class="header-text">We care about pets...</h1>
  </main>
</div>
<!-- Router Outlet -->
<div class="container">
  <router-outlet></router-outlet>
    </div>
  `,

)

export class AppComponent

app.module.ts

import  NgModule        from '@angular/core';
import  BrowserModule   from '@angular/platform-browser';
import  FormsModule     from '@angular/forms';
import  HttpModule, JsonpModule  from '@angular/http';

import  AppComponent          from './app.component';
import  DogsModule  from './Dogs/dogs.module';
import  CatsModule  from './Cats/cats.module';
import  UserModule           from './Users/users.module';
import routing from './app.routes';
import RouterModule from "@angular/router";


@NgModule(
  imports: [
    BrowserModule,
FormsModule,
 HttpModule,
RouterModule,
JsonpModule,
UserModule,
DogsModule,
CatsModule,
routing
 ],
 declarations: [
  AppComponent,
 ],
 providers: [   ],
  bootstrap: [ AppComponent ]
)

export class AppModule 

dog-list.component.ts

 import Component, OnInit from '@angular/core';
import PetService from '../services/pet.service'
import Observable from 'rxjs/Observable';
import Pet from '../model/pet';
import AuthenticationService from "../../Users/services/authentication.service";


@Component(

  template: `
    <h2>Dogs</h2>
    <p>List of dogs</p>
    <ul class="demo-list-icon mdl-list">
      <li class="mdl-list__item" *ngFor="let dog of dogs | async">
        <span class="mdl-list__item-primary-content">
            <i class="material-icons mdl-list__item-icon">pets</i>
            <a [routerLink]="['/dogs', dog.id.$t]">dog.name.$t</a>
        </span>
      </li>
    </ul>
    `
)
// Component class implementing OnInit
export class DogListComponent implements OnInit 
  // Private property for binding
  dogs: Observable<Pet[]>;

  constructor(private petService: PetService, private _service: AuthenticationService) 

  

  // Load data ones componet is ready
  ngOnInit() 
    this._service.checkCredentials();
    // Pass retreived pets to the property
    this.dogs = this.petService.findPets('dog');
    alert(JSON.stringify(this.dogs))
  

我有没有更好的方法来修复这个错误?

【问题讨论】:

您需要将RouterModule 添加到使用RouterOutletrouterLink 等路由器指令的每个模块的imports: [] 感谢哥们,我已将 DogsModule 的 RouterModule 添加到`imports:[]` 部分及其工作 不客气。很高兴听到你可以让它工作。 似乎 Vikash 建议在我之前已经在他的答案下面的 cmets 中。随时接受他的答案,也许请他更新他的答案。 【参考方案1】:

我使用 Angular Material2 ("2.0.0-alpha.9-3",) md-nav-list 遇到了这个问题:

<md-nav-list>
  <md-list-item>
    <a [routerlink]="['']">
      <md-icon md-list-avatar>home</md-icon>
      <span>Home</span>
    </a>
  </md-list-item>
</md-nav-list>

抛出Can't bind to 'routerlink' since it isn't a known property of 'a'.

<md-nav-list>
  <md-list-item>
    <a [routerLink]="['']">
      <md-icon md-list-avatar>home</md-icon>
      <span>Home</span>
    </a>
  </md-list-item>
</md-nav-list>

工作正常。请注意,只有 routerlinkrouterLink 的情况不同。就我而言,IntelliJ 会自动转换为全小写版本……呃!

【讨论】:

这似乎没有多大意义。在第二个示例中,您使用文本 [''] 创建了一个 routerlink 属性。如果你想要一个路由器链接,那么它应该是routerLink 而不是routerlinkrouterLink="/some/path"[routerLink]="['/some', 'path']",但不是routerLink="[...]",这是错误的。 呃! IntelliJ 不断将 routerLinkngIf 之类的大小写更改为 routerlinkngif!很好,谢谢。 答案已更新为正确。如果您拼写名称或让 IntelliJ 将其更改为全小写,那么您将收到类似的错误。哦,[routerLink]="['']" 转到 / 即主页。【参考方案2】:

您必须在组件中导入路由器才能使用 routerLink。

 import  Router  from '@angular/router';

您需要将 RouterModule 添加到使用 RouterOutlet 或 routerLink 等路由器指令的每个模块的导入:[]。

【讨论】:

错误:模板解析错误:无法绑定到“routerLink”,因为它不是“a”的已知属性。 ("content"> 宠物 ][routerLink]="['/dogs', dog.id.$t] ">dog.name.$t "): DogListComponent@7:19 嗨,当我们将它添加到声明部分时它可以工作,但是当我将它添加到 DogsModule 然后 DogsModule 添加到 app.module 那么为什么不工作你能解释一下吗 你还必须在 DogsModule 中导入 RouterModule 感谢哥们,我必须按照“Günter Zöchbauer”的方式修改 DogsModule【参考方案3】:

您需要将RouterModule 添加到您使用RouterOutletrouterLink 等路由器指令的每个模块imports: []-

【讨论】:

谢谢。它适用于我使用的 3.3.1 版本的 @angular/router。 @Gunter:如果我不想将它包含到每个子模块中,还有其他替代 Angular 5 的方法吗? 我不这么认为,但我也不明白为什么这会是个问题。当可交付的大小或执行效率处于状态时,Angular 通常不会做出太大的妥协,这就是模块的意义所在。

以上是关于模板解析错误:无法绑定到“routerLink”,因为它不是“a”的已知属性 [重复]的主要内容,如果未能解决你的问题,请参考以下文章

如何解决错误 NG8002:无法绑定到“routerLink”,因为它不是“a”的已知属性。?

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

Angular 7 无法绑定到“routerlink”,因为它不是“a”的已知属性

10 个规范,10 个失败 - 无法绑定到“routerLink”,因为它不是“按钮”的已知属性 [重复]

无法绑定到“routerLink”,因为它不是“a”的已知属性。尽管引用了路由器模块,但仍然出错

未捕获的错误:模板解析错误:无法绑定到“FormGroup”,因为它不是“form”的已知属性