Question

是否可以以角度扩展组件？如果是这样，如果它们都扩展了相同的基本组件，我可以创建一个包含多个不同组件的列表（通过ngFor循环）吗？

例如，我的自定义菜单栏是否可以包含不同类型菜单项的列表，如果所有这些菜单项都扩展相同的＆＃34; CustomMenuItem＆＃34;零件？有些是下拉菜单，有些是按钮，有些是文本框等，但所有都会分享一些基本功能......

@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

你可以在角度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

从角度2.3开始，我们得到了组件继承 - 看看下面的示例代码（取自this blog post）：

@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>

我可以在ngFor循环中扩展角度分量并引用基本分量吗？

2 个答案: