Question

我是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:

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

提前致谢：）

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

0 个答案: