Angular 扩展父组件 HTML

Question

I know this is an old question but I cant find a simple answer and it seems so strange.

I have a father component with its own html and several component that extends this one.

I need something like this:

Father's HTML template

<p class="father"> somethings </p>
<child-component></child-component> <-- some kind of angular tag

class ChildComponent extends FatherComponent

<p> Im a Child </p>

Result rendering Child

<p class="father"> somethings </p>
<p> Im a Child </p>

Is this so hard to get?

UPDATE AS ASKED

@Component({
    selector: 'BaseComponent',
    templateUrl: 'BaseComponent.html',
})
export class BaseComponent implements OnInit 
{
...
}



@Component({
    selector      : 'ChildBaseComponent ',
    templateUrl   : 'ChildBaseComponent .html',
  })
export class ChildBaseComponent extends BaseComponent
{
   ....
}

Answer 1

I think what you're looking for here is content projection . You can find plenty of articles about this topic. I modified you examples slightly

@Component({
    selector: 'BaseComponent',
    template: `
               <p class="father"> somethings </p>
               <ng-content></ng-content>
               `,
})
export class BaseComponent implements OnInit 
{
...
}



@Component({
    selector      : 'ChildBaseComponent',
    templateUrl   : `
                      <BaseComponent><p> Im a Child </p></BaseComponent>`,
  })
export class ChildComponent
{
@ViewChild(BaseComponent) public baseComponent: BaseComponent
   
}

The thing is Angular doesn't inherit metadata of the parent class, it overrides it. There plenty of tools angular provides to deal with code sharing. You can always access your parent component from the child thanks to ViewChild decorator. And as the answer to your question - no, there is no such tag.