Question

我想在Angular中使用组件的继承来继承父模板。

简介

我有一些基本组件（让我们称之为ParentComponent）和这个组件的几个孩子（Child1Component和Child2Component）。我想将默认行为放在ParentComponent中，然后在子组件中设置/扩展此行为。 ParentComponent模板已包含所有需要的内容，因此我希望子组件默认使用此模板。

第一个实施变体（不起作用，Error: No template specified for component Child1Component）：

@Component({
    selector: 'app-parent',
    templateUrl: './app-parent.component.html',
    styleUrls: ['./app-parent.component.scss']
})
export class ParentComponent {
}

@Component({
    selector: 'app-child1'
})
export class Child1Component extends ParentComponent {
}


@Component({
    selector: 'app-child2'
})
export class Child2Component extends ParentComponent {
}

我发现我可以将templateUrl和styleUrls个孩子设置为父级的模板，但只有当ViewEncapsulation个孩子设置为{{1}时才能生效}。

第二个变体（它有效，但我不喜欢它）：

None

我不喜欢这个解决方案的原因

子组件中没有视图封装;
每个子组件的模板和样式URL复制粘贴。

你能否建议我更好地解决这个问题？

Answer 1

第二种方法是唯一可行的方法，因为有装饰器继承的规则，请参阅https://github.com/angular/angular/issues/11606。

@Component decorator不能被部分继承，它全部或全无。

在Angular2中使用父组件的模板

1 个答案: