角度2のディレクティブでホストDOM要素を条件付きで挿入/削除する方法

Question

ホスト要素をページ上に表示するかどうかを決定する指示文を作成したいとします。理想的には、DOMから要素を削除するだけでなく、CSSで非表示にすることもできます。ユースケースは、次のとおりです。

<ul role="navigation"> 
    <li><a>public link</a></li> 
    <li><a>public link2</a></li> 
    <li access="admin"><a>admin-only link</a></li> 
</ul> 

そこには管理liが削除されるだろうがありません場合は、CurrentUserに役割を取得するためにUserServiceのを使用します。

私はng-if（角2でまだ利用可能な場合）と同じ効果を得ることができると思います。しかし、このディレクティブでは、意味論的でエレガントです。

可能ですか？

import {Directive} from 'angular2/angular2'; 

@Directive({ 
    selector: 'access' 
}) 
export class Access { 
//what goes here 
} 

私は簡単にその（ディレクティブのcompile関数内で）1の角度で行われていたかもしれないが、私は角2でこれをどのように行うことができますか？

Answer 1

DOMから要素を削除するには、*ngIfディレクティブを使用します。

あなたが本当にあなた自身の指令を使用することを主張するなら、私はElementRefが行く方法だと信じています。この実装はngIfディレクティブが何であるかのようになります

import {Directive} from 'angular2/angular2'; 

@Directive({ 
    selector: '[access]' //this is how you address an attribute directive 
}) 
export class Access { 
    constructor(private _userService : UserService, private _elementRef : ElementRef) {} 

    ngOnInit() { 
     this._checkAdmin(); 
    } 

    private _checkAdmin() : void { 
     if(!this._userService.currentUser.hasRole('admin')) { 
      let el : HTMLElement = this._elementRef.nativeElement; 
      el.parentNode.removeChild(el); 
     } 
    } 
} 

Answer 2

：私はこの

を使用してのアドバイスではないでしょうにもかかわらず、あなたはこのような何かを取得します。また、角度guide for structural directives（これも作成予定）は、myUnlessの例を返して、ちょうど逆のngIfとなります。

アクセスの実装は、myUnlessの実装と似ています。

@Directive({ selector: '[access]' }) 
export class AccessDirective { 
    constructor(
    private _templateRef: TemplateRef, 
    private _viewContainer: ViewContainerRef 
    ) { } 
    @Input() set myUnless(condition: boolean) { 
    if (condition) { 
     this._viewContainer.createEmbeddedView(this._templateRef); 
    } else { 
     this._viewContainer.clear(); 
    } 
    } 
} 

など、それを使用します。

<li *access="isAdmin"><a>admin-only link</a></li>