Angular 2:无法绑定到&#rou; routerlink'因为它不是“a”的已知属性。

时间:2017-03-27 04:43:08

标签: angularjs angular

我是角色2的新手我试图创建一个示例应用程序,看到一个复数瞄​​准教程,但是当我尝试创建路径时,我得到了上面提到的错误。

我无法弄清楚为什么会出现错误。有人可以帮忙。

app.component.ts

import { Component } from '@angular/core';
import { ProductService} from './products/product.service';
@Component({
selector: 'pm-app',
template: `
   <div>
        <nav class= 'navbar navbar-default'>
           <div class ='container-fluid'>
             <a class = 'navbar-brand'>{{pageTitle}}</a>
                <ul class = 'nav navbar-nav'>
                  <li><a [routerlink]="['/welcome']">Home</a></li>
                  <li><a [routerlink]="['/products']">Product List</a></li>
               </ul>               
           </div>
     </nav>
     <div class='container'>
     <router-outlet></router-outlet>
     </div>
   </div>      
`,
providers: [ ProductService ]
})

export class AppComponent { 
    pageTitle: string ="Acme Product Management";
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {FormsModule} from '@angular/forms';
import {HttpModule} from '@angular/http';
import {RouterModule} from '@angular/router';
import {ProductListComponent} from './products/products-list.component';
import { AppComponent }  from './app.component';
import {ProductFilterPipe} from './products/product-filter.pipe';
import {ProductDetailComponent} from './products/product-detail.component';
import {WelcomeComponent} from './home/welcome.component';
import {StarComponent} from './shared/star.component';

@NgModule({

    imports: [ BrowserModule,FormsModule ,HttpModule,
      RouterModule.forRoot([
       {path : 'products',component:ProductListComponent},
       {path:'Product/id',component :ProductDetailComponent},
       {path:'welcome',component:WelcomeComponent},
       {path:'',redirectTo:'welcome',pathMatch:'full'},
       {path:'**',redirectTo:'welcome',pathMatch:'full'}
      ]),],

    declarations: 
    [     
     AppComponent,ProductListComponent,ProductFilterPipe,StarComponent,
     ProductDetailComponent,WelcomeComponent], 
     bootstrap: [ AppComponent ]  
})

export class AppModule { }

此致 Nagasree。

1 个答案:

答案 0 :(得分:1)

我弄错了。

@NgModule ({

   imports: [ BrowserModule,FormsModule ,HttpModule,

  RouterModule.forRoot([

      {path : 'products',component:ProductListComponent},

      {path:'Product/id',component :ProductDetailComponent},

      {path:'welcome',component:WelcomeComponent},

     {path:'',redirectTo:'welcome',pathMatch:'full'},

     {path:'**',redirectTo:'welcome',pathMatch:'full'}

**]),**

],

在粗体代码中,我保留了额外的&#39;,&#39;在上面提到的代码]中只有一行,。一旦删除它,就开始工作了。