在 Angular2 中使用父组件的模板

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 设置为None 时才有效。

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

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

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

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

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

1. 子组件中没有视图封装；
2. 为每个子组件复制粘贴模板和样式网址。

---

您能否为这项任务建议更好的解决方案？

Answer 1

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

@Component装饰器不能部分继承，要么全有，要么全无。