角度4。基于if删除构造函数中的组件

为此,你可以看到 CanActivate . 把它放在部件上 route 它会完成你想要的工作。

这样,您就可以编写一个逻辑,根据它来导航或不导航路线。

组件编译生命周期由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 做