大佬教程收集整理的这篇文章主要介绍了angular – 模板解析错误:无法绑定到’routerLink’,因为它不是’a’的已知属性,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
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 { httpR_158_11845@odule,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,httpR_158_11845@odule,RouterModule,JsonpModule,UserModule,DogsModule,CatsModule,routIng ],declarations: [ AppComponent,],providers: [ ],bootstrap: [ AppComponent ] }) export class AppModule {}
狗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)) } }
以上是大佬教程为你收集整理的angular – 模板解析错误:无法绑定到’routerLink’,因为它不是’a’的已知属性全部内容,希望文章能够帮你解决angular – 模板解析错误:无法绑定到’routerLink’,因为它不是’a’的已知属性所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。