Angular扩展了父组件HTML

Question

我知道这是一个老问题，但我找不到简单的答案，而且看起来很奇怪。

我有一个父亲组件，它有自己的html和几个扩展这个组件的组件。

我需要这样的东西：

父亲的HTML模板

<p class="father"> somethings </p>
<child-component></child-component> <-- some kind of angular tag

class ChildComponent扩展了FatherComponent

<p> Im a Child </p>

结果呈现子

<p class="father"> somethings </p>
<p> Im a Child </p>

这很难得到吗？

按要求更新

@Component({
selector: 'BaseComponent',
templateUrl: 'BaseComponent.html',
})
export class BaseComponent implements OnInit 
{
...
}

@Component({
selector      : 'ChildBaseComponent ',
templateUrl   : 'ChildBaseComponent .html',
})
export class ChildBaseComponent extends BaseComponent
{
....
}

Answer 1

我认为您在这里寻找的是内容投影。你可以找到很多关于这个主题的文章。我稍微修改了你的例子

@Component({
selector: 'BaseComponent',
template: `
<p class="father"> somethings </p>
<ng-content></ng-content>
`,
})
export class BaseComponent implements OnInit 
{
...
}

@Component({
selector      : 'ChildBaseComponent',
templateUrl   : `
<BaseComponent><p> Im a Child </p></BaseComponent>`,
})
export class ChildComponent
{
@ViewChild(BaseComponent) public baseComponent: BaseComponent

}

问题是Angular并没有继承父类的元数据，而是覆盖了它。angular提供了大量工具来处理代码共享。多亏了ViewChild装饰器，您总是可以从子组件访问父组件。作为你问题的答案——不，没有这样的标签。