0

是否可以以角度扩展组件？如果是这样，如果它们都扩展同一个基本组件，我可以创建多个不同组件的列表（通过 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>;

    //...
}
4

2 回答 2

1

从 Angular 2.3 开始，我们得到了组件继承 - 看看下面的示例代码（取自这篇博文）：

@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>
于 2016-12-12T13:18:59.833 回答
0

您可以使用 Angular 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);
于 2016-03-29T22:01:46.090 回答