Question

urllib

我想通过引用属性 [id] 创建动态组件。

Answer 1

为什么不创建新组件并嵌入*ngFor并通过@Input()将ID传递到新组件？

Answer 2

您可以创建服务：

@Injectable()
export class WidgetService {
  
  getWidget(id) : IWidget {
    // return your constructed widget instead
    return {componentName : id};
  }
}

现在创建一个窗口小部件组件，该组件接收ID并向上述服务发送请求以获取窗口小部件：

@Component({
  selector: 'widget',
  template: `
    <div>
      <h2>{{data.componentName}}</h2>
    </div>
  `,
  providers: [WidgetService]
})
export class WidgetComponent implements OnInit{
  @Input() id: string;
          data: IWidget;
  constructor(private wService : WidgetService) {}
  
  ngOnInit() {
    this.data = this.wService.getWidget(this.id);
  }
  
}

使用界面将信息作为小部件界面传递到这里..

export interface IWidget {
  componentName : string
}

现在修改你的代码以接受* ngFor中的WidgetComponent：

@Component({
  selector: 'my-app',
  template: `
    <div *ngFor="let w of widgets">
      <widget [id]="w.componentName"></widget>
    </div>
  `,
})
export class App {
  widgets:IWidget[];
  constructor() {
    this.widgets = [
      {componentName : "w1"},
      {componentName : "w2"},
      {componentName : "w3"}
      ]
  }
}

如何在Angular2中引用用于创建动态组件的元素

2 个答案: