如何在角度2.4.2内的* ngFor内动态创建多个路由器出口?

时间:2017-01-08 12:06:24

标签: angular angular2-routing

我是angular2(2.4.2)的新手,我正在尝试动态创建多个路由器插座:

示例代码 -

import { Component } from '@angular/core';
import { Router  }  from '@angular/router';

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>

   <div *ngFor="let number of numbers">{{number}}</div>

   <div *ngFor="let number of numbers">
     <router-outlet name="{{number}}"></router-outlet>
   </div>

   <router-outlet></router-outlet>
  `,
})
export class AppComponent  { 
  name = 'Angular'; 
numbers:any;

constructor(){
  this.numbers = [0,1,2,3,4];
}

}

但我在*ngFor

中的路由器插座出现此错误
Unhandled Promise rejection: Template parse errors:
'router-outlet' is not a known element:
1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
2. If 'router-outlet' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("

    <div *ngFor="let number of numbers">
      [ERROR ->]<router-outlet></router-outlet>
    </div>

"): AppComponent@5:6
'router-outlet' is not a known element:
1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
2. If 'router-outlet' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
    </div>

   [ERROR ->]<router-outlet></router-outlet>
  "): AppComponent@8:3 ; Zone: <root> ; Task: Promise.then ; Value: 

为避免上述错误,我在导入部分添加了路由器模块,在AppModule的providers部分添加了RouterOutletMap。

之后,我开始收到此错误:

Unhandled Promise rejection: Template parse errors:
Can't bind to 'name' since it isn't a known property of 'router-outlet'.
1. If 'router-outlet' is an Angular component and it has 'name' input, then verify that it is part of this module.
2. If 'router-outlet' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("

    <div *ngFor="let number of numbers">
      <router-outlet [ERROR ->]name="{{number}}"></router-outlet>
    </div>

"): AppComponent@5:21 ; Zone: <root> ; Task: Promise.then ; Value: 

有人可以指出我的错误吗?如何根据需求动态创建多个路由器出口?

提前致谢:)

0 个答案:

没有答案