Можете ли вы расширить HTML-код с наследованием в Angular (5-6) [TypeScript]

Question

У меня есть эта идея в моей голове, есть компонент ConfrimModal, который расширяет обычный модальный код.

код очень эффективен, так как я могу написать весь основной код (TypeScript) внутри модальногоа затем просто добавьте конкретные вещи в ConfirmModal, чтобы закончить.

Могу ли я сделать что-то похожее с HTML, что есть базовый конверт (который унаследован от Modal, и затем я добавляю все вещи, которые мне нужны, используядругой шаблон)?

modal.component.ts

@Component({
    selector: 'app-modal',
    template: '<section></section>'})

export abstract class ModalComponent{
      protected modalService: BsModalService;

      protected constructor(receivedModalService: BsModalService) {
        this.modalService = receivedModalService;
      }
}

verify-modal.component.ts

@Component({   
    selector: 'app-confirm-modal',
    template: '<div>Hi its a test</div>',
    styleUrls: ['./confirm-modal.component.css'] })

export class ConfirmModalComponent extends ModalComponent implements OnInit {

  constructor(protected modalService: BsModalService) {
    super(modalService);   }

  ngOnInit() {   }

}

и я хочу, чтобы конечный результат составил

<section><div>Hi its a test</div></section>

, используя что-то в духе ООП.

Я пытался использовать ng-content, но нашел его неуместным.

успешно передает простой HTML, но это вызывает проблемы с привязкой [помимо того, что это неагрессивный способ справиться с ситуацией].

Answer 1

Я думаю, что шаблон с нг-контентом решит эту проблему:

<div class="card card-block">
  <h4 class="card-title">
    <ng-content select=".setup"></ng-content> 
  </h4>
  <p class="card-text"
     [hidden]="data.hide">
    <ng-content select=".punchline"></ng-content> 
  </p>
  <a class="btn btn-primary"
     (click)="data.toggle()">Tell Me
  </a>
</div>

Answer 2

Ng-контент не поддерживает привязку данных от родителя к потомку.Вы можете сделать это без наследования от родительского компонента и с поддержкой привязки данных, используя ng-template. Здесь пример:

parent.component.html

<section>
    <ng-template [ngTemplateOutletContext]='{data: data}' [ngTemplateOutlet]="templateVariable"></ng-template>
</section>

parent.component.ts

@Input() data: any[];
@ContentChild(TemplateRef) templateVariable: TemplateRef<any>;

child.component.html

<ul>
    <li *ngFor="let item of data">{{item}}</li>
</ul>

child.component.ts

@Input() data: any[];

приложение.component.html

<app-parent [data]="items">
   <ng-template let-data="data">
       <!-- Here can be any component -->
       <app-child [data]="data"></app-child>  
   </ng-template>
</app-parent>

app.component.ts

items = ['One', 'Two', 'Three', 'Four'];

Answer 3

HTML является типом языка разметки.Он инкапсулирует или «размечает» данные в тегах HTML, которые определяют данные и описывают их назначение на веб-странице.Затем веб-браузер читает HTML, который сообщает ему, например, какие части являются заголовками, какие части являются абзацами, какие части являются ссылками и т. Д. HTML описывает данные для браузера, и браузер затем отображает данные соответствующим образом.

То есть вы не можете относиться к нему как к любому другому языку

ссылка: https://ischool.syr.edu/infospace/2012/04/05/why-html-is-not-a-programming-language/