Angular 2 - 基類包含子類模板

Question

我嘗試爲基類定義了一個彈出窗口（帶有邊框，標題和關閉按鈕），並且在子類中定義了窗口的內部，並且模板

我讀了許多繼承的教程，但每次的子類覆蓋了基類的模板而不是beeing注入它

我應該使用繼承裏面？聚合？指令？在這種情況下，我可以傳遞一個組件類作爲指令的參數嗎？

基類：

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

當您在打字稿/棱角分明，僅內部擴展類結構ure和meta是繼承的。班級註釋（@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{}