2017年11月12日

Angularの構造ディレクティブ(Structural directives)でif文を作ってみる

Angularの構造ディレクティブで*ifと同じ機能をもつ *if2を作成(elseとかはなし)

TemplateRefでテンプレート(もとのHTML的なの)を、ViewContainerRefでテンプレートが挿入されていた場所を取得できるのでif2がtrueの場合は挿入、if2がfalseの場合はクリアする。

import {Directive, Input , OnChanges, TemplateRef, ViewContainerRef} from '@angular/core';

@Directive({
selector: '[if2]'
})
export class If2Directive implements OnChanges {

@Input() if2: boolean;
constructor(
private template: TemplateRef,
private container: ViewContainerRef
) {}

ngOnChanges() {
if (this.if2) {
this.container.createEmbeddedView(this.template);
}else {
this.container.clear();
}
}
}

posted by ねこまんま at 00:44 | Comment(0) | Angular | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。