angular - 如何在 angular 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>

它将使用 UserService 获取当前用户 Angular 色，如果没有 admin，则 li 将被删除。

我想我可以通过将表达式传递到主要组件中的 evaluate 来使用 ng-if 实现相同的效果(如果它在 angular 2 中仍然可用)。但是有了指令，它就更加语义化和优雅了。

这可能吗？

import {Directive} from 'angular2/angular2';

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

我可以在 Angular 1 中轻松做到这一点(在指令的 compile 函数中)，但我如何在 Angular 2 中做到这一点？

Answer 1

此实现类似于 ngIf 指令。和 Angular 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>