Angular html расширяется

Question

у меня есть этот универсальный c компонент

data-list.component.ts

export interface basic_data {name:string}
@Component({
  selector: 'data-list',
  templateUrl: './data-list.component.html',
  styleUrls: ['./data-list.component.scss'],
})
export class DataListComponent {

    public data: basic_data[] = [];
    constructor() {
    }
}

data-list.component. html

<div *ngFor="let item of data">
    <label>{{item.name}}</label>
<div>

Я хотел бы расширить DataListComponent для отображения информации о различиях в зависимости от типа данных.

export interface ext_data extends basic_data {ext_value:string}
export class Ext_DataListComponent extends DataListComponent {

    public ext_data: ext_data[] = [];
    constructor() {
        super();
        this.data = this.ext_data;
    }
}

Есть ли способ наследования html, чтобы я мог отобразить ext_data?

<div *ngFor="let item of data">
    <label>{{item.name}}</label>
    <label>{{item.ext_value}}</label>
<div>

Я действительно не хочу копировать / пропускать всю страницу шаблонов и логи c

Answer 1

Расширение компонента является плохой практикой, и шаблон не может быть расширен. Для этого используйте входные данные:

@Component({
  selector: 'data-list',
  templateUrl: './data-list.component.html',
  styleUrls: ['./data-list.component.scss'],
})
export class DataListComponent {
    @Input() data: basic_data[];
    @Input() isShowExt = false;
}

<div *ngFor="let item of data">
    <label>{{item.name}}</label>
    <label *ngIf="isShowExt">{{item.ext_value}}</label>
</div>

Пример 1:

@Component({
  selector: 'example1',
  templateUrl: './example1.component.html',
  styleUrls: ['./example1.component.scss'],
})
export class Example1 {
    data = [
      { name: 'test_name' },
      { name: 'test_name' },
      { name: 'test_name' },
    ]
}

<data-list [data]="data"></data-list>

Пример 2:

@Component({
  selector: 'example2',
  templateUrl: './example2.component.html',
  styleUrls: ['./example2.component.scss'],
})
export class Example2 {
    data = [
      { name: 'test_name', ext_value: 'value' },
      { name: 'test_name', ext_value: 'value' },
      { name: 'test_name', ext_value: 'value' },
    ]
}

<data-list [data]="data" [isShowExt]="true"></data-list>