10

ホスト要素をページに表示するかどうかを決定するディレクティブを作成したいと考えています。理想的には、要素を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 ロールを取得し、そこに管理者がいない場合liは削除されます。

ng-ifメインコンポーネントで評価する式を渡すことで、(angular 2 でまだ利用可能な場合)同じ効果を達成できると思います。しかし、ディレクティブを使用すると、よりセマンティックでエレガントになります。

出来ますか？

import {Directive} from 'angular2/angular2';

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

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

4

2 に答える 2

7

この実装は、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>
于 2015-12-24T08:50:48.063 に答える
1

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);
    }
  }
}
于 2015-12-24T08:15:31.940 に答える