Angular 2 - 基类包含子类模板

Posted 2023-02-22

【中文标题】Angular 2 - 基类包含子类模板

【英文标题】：Angular 2 - base class incorporates child class template

【发布时间】：2017-08-21 12:46:32

【问题描述】：

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

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

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

基类：

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 

谢谢

【参考方案1】：

当你在 typescript/angular 中扩展类时，只有内部结构和元被继承。无法继承类注释 (@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

【讨论】：

它有效！感谢您花时间制作 plunkr ;-)