2

我的问题是关于检查<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>

<mfoot>如果在标签内的编辑器模板中使用了标签，我们不想显示 div.modal-footer <modal>。那么如何实现hasNgContent()方法呢？或者可能在 angular2 中有更直接的*ngIf语句，允许检测该<mfoot>标签是否在父组件标签中使用。

4

2 回答 2

1

您可以使用 @ContentChildren 执行此操作并查看集合的长度。就像是：

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

这将填充所有 mfootComponents，因此您可以检查是否有。我希望它有所帮助。

于 2016-07-09T10:21:11.253 回答
0

The solution that I found is a little dirty and use jQuery, but I don't see any other way in question frame (so without make tag <mfoot> as separate component):

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;
    }
}
于 2016-07-11T06:42:17.227 回答