javascript – angular 4.基于if删除构造函数中的组件

我想为组件添加保护.
如果用户没有权限查看此组件,则不会呈现该组件.

我已经尝试将我的if放在构造函数中并返回false但它仍然呈现.

我还将if添加到模板本身,但后来我没有看到视图,但组件仍处于活动状态,这增加了代码的复杂性,因为我需要维护相同的几个地方.

有没有办法告诉组件根本不渲染？

 constructor( private userService: UserService) {
    if (this.userService.isAllowed("see_trade_groups") === false) {
           return;
    }
}

解决方法:

组件编译生命周期由Angular编译器处理,因此组件无法控制自己的生命周期,应该从外部控制它.

处理此问题的常用方法是使用路由器.路由组件的生命周期与常规组件不同,因为它由路由器处理;它们被附加到< router-outlet>零件.它可能是prevent compilation in route components但不是常规组件.

否则,应该使用指令处理. ngIf是内置的方法,可以防止编译常规组件.

所以它变成了

<foo *ngIf="userService.isAllowed('see_trade_groups')"></foo>

由于这需要在每次需要时将userService注入父组件,这将导致大量的样板代码.一个合适的解决方案是创建一个行为与ngIf类似的指令 – 或者扩展它以提供所需的功能：

import {Input, OnChanges, SimpleChanges, TemplateRef, ViewContainerRef} from '@angular/core';
import {NgIf, NgIfContext} from '@angular/common';

...

@Directive({
    selector: '[role]'
})
class Role extends NgIf {
    @Input() role: string;

    constructor(
        viewContainer: ViewContainerRef,
        templateRef: TemplateRef<NgIfContext>
        public userService: User
    ) {
        super(viewContainer, templateRef);
    }

    ngOnChanges({ role }: SimpleChanges) {
        this.ngIf = this.userService.isAllowed(role);
        // can also subscribe to some observable to add/remove a component any time 
    }
}

使用如下：

<foo *role="'see_trade_groups'"></foo>

请注意,Role是*结构指令.这允许它控制指定元素的编译,类似于ngIf和ngFor的工作方式.