![Imports]( "Imports")
本文介绍了模板解析错误:无法绑定到“routerLink"，因为它不是“a"的已知属性的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在创建一个组件，然后将其设置为根组件，然后出现错误 模板解析错误:无法绑定到 'routerLink'，因为它不是 'a' 的已知属性. 我在组件注释中使用 RouterLink 作为指令，但它无法工作.
app.routes.ts
import { ModuleWithProviders } from '@angular/core';从'@angular/router' 导入 { Routes, RouterModule };从 './Dogs/dog.routes' 导入 { dogRoutes };从 './Cats/cat.routes' 导入 { catRoutes };从./Users/user.routes"导入{userRoutes}；//路由配置导出常量路由:路由 = [{小路: ''，重定向到:'/狗'，路径匹配:'完整'},...catRoutes，...狗路线，...用户路由];导出常量路由:ModuleWithProviders = RouterModule.forRoot(routes);
app.component.ts
import { Component } from '@angular/core';@成分({选择器:'我的应用'，模板:`<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"><!-- 标题--><span class="mdl-layout-title">苏格兰宠物</span><!-- 添加间隔，使导航向右对齐--><div class="mdl-layout-spacer"></div><!-- 使用路由器指令导航--><nav class="mdl-navigation"><a class="mdl-navigation__link" [routerLink]="['/']">首页</a><a class="mdl-navigation__link" [routerLink]="['/cats']">猫</a><a class="mdl-navigation__link" [routerLink]="['/dogs']">Dogs</a><a class="mdl-navigation__link" [routerLink]="['/login']">登录</a></nav>
</标题><main class="mdl-layout__content"><h1 class="header-text">我们关心宠物...</h1></main>
<!-- 路由器插座--><div class="容器"><路由器插座></路由器插座>
`，})导出类 AppComponent{}
app.module.ts
import { NgModule } from '@angular/core';从'@angular/platform-browser' 导入 { BrowserModule };从'@angular/forms'导入{FormsModule}；从@angular/http"导入 { HttpModule, JsonpModule };从 './app.component' 导入 { AppComponent };从'./Dogs/dogs.module'导入{DogsModule}；从 './Cats/cats.module' 导入 { CatsModule };从 './Users/users.module' 导入 { UserModule };从 './app.routes' 导入 {routing}；从@angular/router"导入{RouterModule}；@NgModule({进口:[浏览器模块，表单模块，Http模块，路由器模块，Jsonp 模块，用户模块，狗模块，猫模块，路由],声明: [应用组件，],提供者: [ ],引导程序:[ AppComponent ]})导出类 AppModule {}
dog-list.component.ts
import {Component, OnInit} from '@angular/core';从../services/pet.service"导入 {PetService}从 'rxjs/Observable' 导入 {Observable}；从'../model/pet'导入{宠物}；从../../Users/services/authentication.service"导入{AuthenticationService}；@成分({模板:`<h2>狗</h2><p>狗名单</p><ul class="demo-list-icon mdl-list"><li class="mdl-list__item" *ngFor="let dog of dog | async"><span class="mdl-list__item-primary-content"><i class="material-icons mdl-list__item-icon">宠物</i><a [routerLink]="['/dogs', dog.id.$t]">{{dog.name.$t}}</a></span>`})//实现 OnInit 的组件类导出类 DogListComponent 实现 OnInit {//绑定的私有属性狗:Observable;构造函数(私人宠物服务:宠物服务，私人_服务:认证服务){}//加载数据 组件准备就绪ngOnInit() {this._service.checkCredentials();//将检索到的宠物传递给属性this.dogs = this.petService.findPets('dog');警报(JSON.stringify(this.dogs))}}
是否有更好的方法来添加修复此错误?
解决方案
你需要在每个模块imports:[]的imports:[]中添加RouterModulestrong> 使用路由器指令的地方，例如 RouterOutlet 或 routerLink-
I am creating a component then it's set to root component then i am getting error Template parse errors: Can't bind to 'routerLink' since it isn't a known property of 'a'. i have using RouterLink as a directive in component anotation but it can't work.
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))
}
}
Is there a better way for me to add fix this error?
解决方案
You need to add the RouterModule to imports: [] of every module where you use router directives like RouterOutlet or routerLink-
这篇关于模板解析错误:无法绑定到“routerLink"，因为它不是“a"的已知属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！