Проверка/обнаружение ng-контента Angular2, существующего из родительского узла, *оператор ngIf

Мой вопрос касается проверки того, что <some_selector>, связанный с <ng-content select='some_selector'>, был задан или нет в родительском компоненте. Может быть, я приведу пример для пояснения:

У нас есть шаблон родительского компонента (editor.html):

вот мой редактор

<modal>
    Some contents
    <mfoot><button calss='btn' (click)="close()">Close</button></mfoot>
</modal>

И в шаблоне модального компонента (modal.html) мы хотим использовать такой оператор *ngIf:

<div class="modal>
    <div class="modal-body">
        <ng-content></ng-content>
    </div>
    <div class="modal-footer" *ngIf='hasNgContent("mfoot")' >
        <ng-content select="mfoot"></ng-content>
    </div>
</div>

Мы хотим не показывать div.modal-footer, если тег <mfoot> используется в шаблоне редактора внутри тега <modal>. Итак, как реализовать метод hasNgContent()? или может быть в angular2 есть более прямой оператор *ngIf, который позволяет определить, использовался ли тег <mfoot> в теге родительского компонента или нет.


angular components sections detection angular2-ngcontent
person Kamil Kiełczewski    schedule 09.07.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете сделать это с помощью @ContentChildren и увидеть длину коллекции. Что-то типа:

@ContentChildren(mfootComponent) children: QueryList<mfootComponent>;

это будет заполнено всеми mfootComponents, поэтому вы можете проверить, есть ли они у вас. Я надеюсь, что это помогает.

person knikolov    schedule 09.07.2016
comment
что такое мфуткомпонент? У меня есть только два компонента: «модальный» и «редактор». Тег <mfoot> не является компонентом! Используется только для ng-content select - person Kamil Kiełczewski; 09.07.2016
comment
Итак, ваша идея состоит в том, чтобы не делать бесплатные теги, такие как ‹mfoot›, а сделать ‹mfoot› компонентом — это какое-то готовое решение, но я соглашусь с ним. (но я не пробовал это, потому что в то же время нашел альтернативное решение) - person Kamil Kiełczewski; 11.07.2016

arrow_upward
0
arrow_downward

Решение, которое я нашел, немного грязное и использует jQuery, но я не вижу другого способа в вопросительной рамке (поэтому без тега make <mfoot> в качестве отдельного компонента):

import { Component, ElementRef, AfterViewInit, ... } from '@angular/core';

declare var $: any;

@Component({
  selector: 'modal',
  templateUrl: './modal.html',
})
export class Modal implements AfterViewInit {

    modalEl = null;

    constructor(private _rootNode: ElementRef) {}

    ngAfterViewInit() {
        this.modalEl = $(this._rootNode.nativeElement).find('div.modal');
    }

    hasNgContent(selector:string) {
        return $(this._rootNode.nativeElement).find(selector).length;
    }
}
person Kamil Kiełczewski    schedule 11.07.2016
comment
может вместо минусов дать конструктивное решение (тело функции hasNgContent) без использования <mfoot> в качестве компонента. - person Kamil Kiełczewski; 11.07.2016