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 ( Child1Component
and Child2Component
). I want to set the default behavior to ParentComponent
and then just configure / extend this behavior in child components. The template ParentComponent
already 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 {
}
?