Using the parent component template in Angular2

Question

I want to inherit the parent template using component inheritance in Angular.

Introduction

I have a base component (even if it is called ParentComponent) and several subsidiaries of this component ( Child1Componentand Child2Component). I want to set the default behavior to ParentComponentand then just configure / extend this behavior in child components. The template ParentComponentalready contains all the necessary things, so I want the child components to use this template by default.

---

The first implementation option (does not work, 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 {
}

• ;
• URL- .

---

?

Answer 1

- , , . https://github.com/angular/angular/issues/11606.

@Component , .