Question

我想创建一个指令，决定是否应该在页面上显示其主机元素apppear。理想情况下，我希望它从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角色，如果没有 admin ，则会删除li。

我想通过将表达式传递给主要组件中的evaulate，我可以用ng-if（如果它仍然在角度2中可用）实现相同的效果。但是使用该指令它更具语义和优雅。

有可能吗？

import {Directive} from 'angular2/angular2';

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

我可以在角度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>

Answer 2

使用*ngIf指令从DOM中删除元素。

但如果你真的坚持使用自己的指令，我相信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);
       }
   }
}

如何在angular 2指令

2 个答案: