Несколько [ngTemplateOutlet] отображает первый только для других также

Question

Я пытаюсь получить несколько ссылок на шаблоны, используя @ContentChild, но отображается первый.

modal.component.html

<div class="ac-modal">
 <ng-container [ngTemplateOutlet]="modalHeader"></ng-container>
 <ng-container [ngTemplateOutlet]="modalBody"></ng-container>
 <ng-container [ngTemplateOutlet]="modalFooter"></ng-container>
</div>

modal.component.ts

@Component({
  selector: 'ac-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.css']
})
export class ModalComponent implements OnInit, OnDestroy, AfterContentInit {
    @ContentChild(TemplateRef) modalHeader: TemplateRef<void>;
    @ContentChild(TemplateRef) modalBody: TemplateRef<void>;
    @ContentChild(TemplateRef) modalFooter: TemplateRef<void>;

    ngAfterContentInit() {
        console.log("HEADER: ", this.modalHeader);
        console.log("body: ", this.modalBody);
        console.log("footer: ", this.modalFooter);
    }
}

app.component.html

<ac-modal>
    <ac-modal-header *acModalHeader></ac-modal-header>
    <ac-modal-body *acModalBody></ac-modal-body>
    <ac-modal-footer *acModalFooter></ac-modal-footer>
</ac-modal>

modal-footer.directive.ts

@Directive({
  selector: '[acModalFooter]'
})
export class ModalFooterDirective {
    constructor(tempalteRef: TemplateRef<void>,
                modalComponent: ModalComponent) { 
          modalComponent.modalFooter = tempalteRef;
    }
}

modal-header.directive.ts

@Directive({
  selector: '[acModalHeader]'
})
export class ModalFooterDirective {
    constructor(tempalteRef: TemplateRef<void>,
                modalComponent: ModalComponent) { 
          modalComponent.modalHeader = tempalteRef;
    }
}

modal-body.directive.ts

@Directive({
  selector: '[acModalBody]'
})
export class ModalFooterDirective {
    constructor(tempalteRef: TemplateRef<void>,
                modalComponent: ModalComponent) { 
          modalComponent.modalBody = tempalteRef;
    }
}

Вывод

modal-header works!

modal-header works!

modal-header works!

Какой бы тег я ни поставил первым в modal.component.html внутри <ac-modal>, компонент отобразится 3 раза.3 раза, потому что у меня 3 <ng-container> в modal.component.html, но я не могу понять, почему это происходит, потому что я передаю разные шаблоны для каждого.

Answer 1

Вы запрашиваете TemplateRef, поэтому Angular всегда даст вам первый.Вы хотите указать конкретные директивы, которые вам нужны:

@ContentChild(ModalHeaderDirective, {read: TemplateRef}) modalHeader: TemplateRef<void>;
@ContentChild(ModalBodyDirective, {read: TemplateRef}) modalBody: TemplateRef<void>;
@ContentChild(ModalFooterDirective, {read: TemplateRef}) modalFooter: TemplateRef<void>;

Если вы сделаете это, вам даже не нужно вводить ModalComponent в директивах, достаточно @ContentChild, чтобы получить TemplateRefs.

Answer 2

Поскольку ContentChild получает только первый соответствующий селектор

, изменить modal.component.ts на

modalHeader: TemplateRef<void>;
modalBody: TemplateRef<void>;
modalFooter: TemplateRef<void>;

@ContentChildren(TemplateRef) templateRefs;

ngAfterContentInit() {
    this.templateRefs.forEach((template: TemplateRef<void>) => {
    if (template === this.modalHeader) {
     //here you can do stuff for ModalHeaderComponent
    }

});

}