在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. 每个子组件的模板和样式URL复制粘贴.

---

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

Answer 1

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

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