Angular 2 - 基类包含子类模板

Question

我尝试为基类定义一个弹出窗口(带有边框、标题和关闭按钮(，并在子类和模板中定义窗口内部

我读了很多继承教程，但每次子类都会覆盖基类模板，而不是注入其中

我应该使用继承吗？聚合？指令？在这种情况下，我可以传递一个组件类作为指令的参数吗？

基类：

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'my-popup-window',
templateUrl: './popupWindow.component.html',
styleUrls: ['./popupWindow.component.css'],
})
export class PopupWindow implements OnInit {
constructor(
) { }
ngOnInit() {
}
}

基本模板 ：

<div class="popupWindowMainDiv">
<!-- here should be injected child class stuffs -->
</div>

儿童班 ：

import { PopupWindow } from '../popupWindow/popupWindow.component';
export class ProductSelectorComponent extends PopupWindow implements OnInit {

谢谢

Answer 1

当你在打字稿/角度中扩展类时，只继承内部结构和元。类注解(@Component(不能继承。因此，当您扩展指令时，您必须完全覆盖@Component注释的所有参数。

@Component({
selector: 'my-another-popup-window',
templateUrl: './popupWindow.component.html',
styleUrls: ['./popupWindow.component.css'],
})
export class ProductSelectorComponent extends PopupWindow implements OnInit {}

在您的特定情况下，您应该具有以下内容：

//popupWindow.component.html
<div class="header"><ng-content select="[header]"></ng-contents></div>
<div class="body"><ng-content select="[body]"></ng-contents></div>
<div class="footer"><ng-content select="[footer]"></ng-contents></div>
@Component({
selector: 'my-another-popup-window',
templateUrl: `
<my-popup-window>
<div header><h1>My Header</h1></div>
<div body><!-- some content --></div>
</my-popup-window>
`,
styleUrls: ['./popupWindow.component.css'],
})
export class ProductSelectorComponent{}