Angular расширяет родительский компонент HTML

Question

Я знаю, что это старый вопрос, но я не могу найти простого ответа, и он кажется таким странным.

У меня есть родительский компонент со своим html и несколькими компонентами, расширяющими этот.

Мне нужно что-то вроде этого:

Отцовский HTML шаблон

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

класс ChildComponent расширяет FatherComponent

<p> Im a Child </p>

Результат рендеринг Ребенок

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

Неужели это так сложно получить?

ОБНОВЛЕНИЕ ПО ЗАПРОСУ

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



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

Answer 1

Думаю, вы ищете проекцию контента . Вы можете найти множество статей об этом топи c. Я немного изменил вам примеры

@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
   
}

Дело в том, что Angular не наследует метаданные родительского класса, а переопределяет их. Существует множество инструментов, которые angular предоставляет для работы с совместным использованием кода. Вы всегда можете получить доступ к своему родительскому компоненту из дочернего благодаря декоратору ViewChild. И как ответ на ваш вопрос - нет, такого тега нет.