模板解析错误:无法绑定到“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
添加到使用RouterOutlet
或routerLink
等路由器指令的每个模块的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>
工作正常。请注意,只有 routerlink
与 routerLink
的情况不同。就我而言,IntelliJ 会自动转换为全小写版本……呃!
【讨论】:
这似乎没有多大意义。在第二个示例中,您使用文本['']
创建了一个 routerlink
属性。如果你想要一个路由器链接,那么它应该是routerLink
而不是routerlink
和routerLink="/some/path"
或[routerLink]="['/some', 'path']"
,但不是routerLink="[...]"
,这是错误的。
呃! IntelliJ 不断将 routerLink
和 ngIf
之类的大小写更改为 routerlink
和 ngif
!很好,谢谢。
答案已更新为正确。如果您拼写名称或让 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
添加到您使用RouterOutlet
或routerLink
等路由器指令的每个模块 的imports: []
-
【讨论】:
谢谢。它适用于我使用的 3.3.1 版本的 @angular/router。 @Gunter:如果我不想将它包含到每个子模块中,还有其他替代 Angular 5 的方法吗? 我不这么认为,但我也不明白为什么这会是个问题。当可交付的大小或执行效率处于状态时,Angular 通常不会做出太大的妥协,这就是模块的意义所在。以上是关于模板解析错误:无法绑定到“routerLink”,因为它不是“a”的已知属性 [重复]的主要内容,如果未能解决你的问题,请参考以下文章
如何解决错误 NG8002:无法绑定到“routerLink”,因为它不是“a”的已知属性。?
无法绑定到“routerLink”,因为它不是已知的本机属性[重复]
Angular 7 无法绑定到“routerlink”,因为它不是“a”的已知属性
10 个规范,10 个失败 - 无法绑定到“routerLink”,因为它不是“按钮”的已知属性 [重复]