10

我想创建一个指令来决定它的宿主元素是否应该出现在页面上。理想情况下，我希望它从 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 获取 currentUser 角色，如果那里没有管理员，li则将被删除。

ng-if我想我可以通过传递表达式在主要组件中进行评估来实现相同的效果（如果它在角度 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它只是 reverses 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 回答