我可以在ngFor循環中擴展角度分量並引用基本分量嗎？

Question

是否可以按角度擴展組件？ 如果是這樣，如果它們都擴展相同的基本組件，是否可以創建多個不同組件的列表（通過ngFor循環）？

例如，我的自定義菜單欄是否可以列出不同種類的菜單項，如果它們都擴展了相同的“ CustomMenuItem”組件？ 有些是下拉菜單，有些是按鈕，有些是文本框，等等，但是都共享一些基本功能...

@Component({
    selector: 'custom-menu-bar',
    inputs: ['customMenuItems'],
    outputs: ['onMenuEvent'],
    template: `
        <div class="row">
            <custom-menu-item *ngFor="#item of customMenuItems">
                ...
            </custom-menu-item>
        </div>
    `
})
export class CustomMenuBar {
    customMenuItems: CustomMenuItem[];
    onMenuEvent: EventEmitter<MenuEvent>;

    //...
}

Answer 1

您可以使用Angle 2中的DynamicComponentLoader進行操作。https: //angular.io/docs/ts/latest/api/core/DynamicComponentLoader-class.html

以下是文檔中的代碼示例：

@Component({
  selector: 'child-component',
  template: 'Child'
})
class ChildComponent {
}
@Component({
  selector: 'my-app',
  template: 'Parent (<div #child></div>)'
})
class MyApp {
  constructor(dcl: DynamicComponentLoader, elementRef: ElementRef) {
    dcl.loadIntoLocation(ChildComponent, elementRef, 'child');
  }
}
bootstrap(MyApp);

Answer 2

從angular 2.3開始，我們有了Component Inheritance-看看下面的示例代碼（從此博客文章中獲取 ）：

@Component({
  selector: 'person',
  template: `<h4>Person: {{name}}</h4>`
})
export class Person {
  @Input() name: string;
}

@Component({
  selector: 'employee',
  template: `<h4>Employee: {{name}}, id: {{id}}</h4>`
})
export class Employee extends Person {
  @Input() id: string;
}

<div>
  <person name="John"></person>
  <employee name="Tom" id="45231"></employee>