web-dev-qa-db-ja.com

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

Host要素をページに表示するかどうかを決定するディレクティブを作成したいと思います。理想的には、cssで非表示/表示するだけでなく、DOMから要素を削除したいと思います。ユースケースは次のとおりです。

<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>

UserServiceを使用してcurrentUserロールを取得し、adminがない場合は、liが削除されます。

ng-if（angular 2）でまだ利用可能な場合）で同じ効果を達成できると思います。式を渡してメインコンポーネントで評価します。ただし、ディレクティブを使用すると、より多くの効果が得られます。セマンティックでエレガント。

出来ますか？

import {Directive} from 'angular2/angular2';

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

angular 1（ディレクティブのcompile関数内）で簡単に実行できましたが、Angular 2でこれを実行するにはどうすればよいですか？

angularweb-componentangular2-directives
9
dKab

この実装は、ngIfディレクティブと同様になります。そして、Angular 構造ディレクティブのガイド （これも作成する予定です）は、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>

6
Chandermani

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

しかし、もしあなたが本当にあなた自身のディレクティブを使うことを主張するなら、私は ElementRef が行く方法であると信じています。これの使用についてはアドバイスしませんが

次のようなものが得られます。

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);
       }
   }
}
1
PierreDuc