2

私の質問は、<some_selector>接続された with<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

私が見つけた解決策は少し汚れていてjQueryを使用していますが、質問フレームに他の方法は見当たりません(タグ<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;
    }
}
于 2016-07-11T06:42:17.227 に答える