Vyhledávání na webu

Můžete rozšířit HTML kód pomocí dědičnosti v Angular(5-6)[TypeScript]

Mám tuto myšlenku v hlavě, existuje komponenta ConfrimModal, která rozšiřuje běžný Modal.

Z hlediska kódu je to velmi efektivní, protože mohu napsat celý základní kód (TypeScript) uvnitř modalu a pak jen přidat konkrétní věci do ConfirmModal, aby byl dokončen.

Mohu udělat něco podobného s HTML, tak, že bude existovat základní obálka (která je děděna od Modal) a pak přidám vše, co potřebuji uvnitř pomocí jiné šablony)?

modal.component.ts

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

export abstract class ModalComponent{
      protected modalService: BsModalService;

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

confirm-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() {   }

}

a chci, aby byl konečný výsledek

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

použitím něčeho ve smyslu OOP.

Zkoušel jsem používat ng-content, ale zjistil jsem, že je to nevhodné.

uspět předáním čistého HTML, ale způsobuje to problémy s vázáním [kromě toho, že je to neangulárský způsob, jak situaci řešit].

Odpověď č. 1

Ng-content nepodporuje datové vazby z rodiče na dítě. Můžete to udělat bez dědičnosti od rodičovské komponenty a s podporou datové vazby pomocí ng-template. Zde je příklad:

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[];

app.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'];

Odpověď č. 2

Myslím, že šablona s ng-content tento problém vyřeší:

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

Související články