Angular 角2分量遗传

Angular 角2分量遗传,angular,Angular,我想创建一个包含html模板的抽象基础组件。扩展基类组件的具体类中的方法将提供基类创建组件所需的数据和一些其他详细信息 我希望基础组件能够从要添加到html模板的具体组件中获取另一个组件的名称 例如,基本组件可能包含一个类似以下内容的html模板: <div>Base Component</div> component: <{{getSelectorName()}}></{{getSelectorName()}}> 基本组件 组成部分: get

我想创建一个包含html模板的抽象基础组件。扩展基类组件的具体类中的方法将提供基类创建组件所需的数据和一些其他详细信息

我希望基础组件能够从要添加到html模板的具体组件中获取另一个组件的名称

例如,基本组件可能包含一个类似以下内容的html模板:

<div>Base Component</div>
component: <{{getSelectorName()}}></{{getSelectorName()}}>
基本组件
组成部分:
getSelectorName()对于一个具体实现可以是“ABC comp”,对于另一个实现可以是“DEF comp”。请注意,我只是使用{{}}符号进行说明

这可能吗?一个人怎么做呢


谢谢你

您可以对所需的所有组件使用相同的templateUrl和StyleURL,因此您可以创建一个组件“基”,并从此基扩展所有组件。仅在构造函数中使用super()并覆盖要更改的函数。小心注入的服务

//Base Component
@Component({
  selector: 'app-base',
  templateUrl: './app-base.component.html',
  styleUrls: ['./app-base.component.css']
})
export class BaseComponent{
    constructor(private servicio:Servicio){}
    funcion1(){}
    function2(){}
} 

//Other component
@Component({
  selector: 'component1-base',
  templateUrl: './app-base.component.html', //<--same html
  styleUrls: ['./app-base.component.css']   //<--same css
})
export class Component1Component extends BaseComponent{
    constructor(servicio:Servicio){
         super(servicio);
         //if you want use servicio you can do
         //this.custom.servicio=servicio
    }
    funcion1(){  
       //this override function1()
       //we can use this.function2()
    }
}
//基本组件
@组成部分({
选择器:“应用程序库”,
templateUrl:'./app base.component.html',
样式URL:['./app base.component.css']
})
导出类基类组件{
构造函数(私有服务:服务){}
Function1(){}
函数2(){}
} 
//其他成分
@组成部分({
选择器:'component1 base',

templateUrl:“./app base.component.html”,//除了模板和样式之外,您可以继承和覆盖任何您想要的内容

参考:


{}
用于属性和属性绑定,在其他地方无效。不支持动态组件选择器。您可以对所有需要的组件使用相同的templateUrl和StyleURL。使用Dynamic-content loader动态添加组件。请参阅:-我确实了解{}的用途括号。我只是用语法来说明。我应该更清楚。谢谢!这正是我的计划。但是在app-base.component.html中,我希望html包含对另一个组件的引用,该组件依赖于扩展此BaseComponent的实现。谢谢!我不知道是否能帮到你(祝你好运)