我正在创建一个组件,然后它被设置为根组件,然后我得到错误模板解析错误:不能绑定到“router link”,因为它不是“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);
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{}
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
添加到每个模块的导入:[]
中,其中您使用了路由器指令,如routeroutlook
或routerlink
-
我更新我们的应用程序从rc4到angular2.0.0之一,我得到一个模板解析错误在运行时。这是我的视图模板: 错误在routerlink上。以下是错误: 路由器链接在我看来并不畸形...我到底做错了什么?
我有两个目标 如果我显示: 一切都很好,但当我试图绑定 我得到: 无法绑定到“tweet limit”,因为它不是“a”的已知属性。("'" (我正在加载twitter时间线,就像这个线程一样)
我使用的是Angular 4.2.4,控制台中出现了一个错误: 而我在app.module.ts文件中包含FormsModule就像as一样 无法绑定到“ng模型”,因为它不是“input”的已知属性 请帮忙解决
我的工作角度11我面对错误时,建立角应用程序 下面是包json文件 在应用程序模块上,我执行以下操作: 那个么如何解决这个问题呢? 应用程序模块和组件员工列表的样本以blow的形式存在 发行图像
最近开始玩《棱角2》了。到目前为止都很棒。因此,为了学习使用我开始了一个个人演示项目。 有了基本的路由设置后,我现在想从报头导航到一些路由,但由于我的报头是的父路由,所以我收到这个错误。 app.component.html header.component.html 现在我部分地理解了,我猜由于该组件是的包装器,所以不可能通过这种方式访问。那么,对于这样的场景,是否有可能从外部访问导航呢? 如果