关于元素的结构指令,routerLinkActive无法正常工作

时间:2017-06-08 03:08:24

标签: angular angular-routing

我在具有routerLinkActive的同一元素上使用了自定义指令。

<li routerLinkActive="active" *wpHasAnyPermission="[newAuthority(permEnum.USER_CREATE, levelEnum.ACCOUNT_OWN)]">
    <a id="createUser" routerLink="users/create"><i
    class="icon-plus-circle2"></i>Create a New User</a>
</li>

当我导航到上面指定的routerLink时,出现inline template caused by: Maximum call stack size exceeded错误。如果我删除自定义指令,则不会发生此问题。

不知道什么事发生在这里。关于如何调试的任何提示?

我使用的是ng 2.4.7,路由器3.4.7

指令

@Directive({
    selector: '[wpHasAnyPermission]'
})
export class HasAnyPermissionDirective {

    private authorities: Authority[];

    constructor(private principal: Principal, private templateRef: TemplateRef<any>, private viewContainerRef: ViewContainerRef) {
    }

    @Input()
    set wpHasAnyPermission(value: Authority[]) {
        this.authorities = <Authority[]> value;
        this.updateView();
        // Get notified each time authentication state changes.
        this.principal.getAuthenticationState().subscribe((identity) => this.updateView());
    }

    private updateView(): void {
        this.principal.hasAnyPermission(this.authorities).subscribe((result) => {
            this.viewContainerRef.clear();
            if (result) {
                this.viewContainerRef.createEmbeddedView(this.templateRef);
            }
        });
    }
}

管理局

export class Authority {
    constructor(public permission: PermissionType,
                public level: PermissionLevel) {

    }

    static of(permission: PermissionType, level: PermissionLevel): Authority {
        return new Authority(permission, level);
    }
}

以下函数位于html的组件ts中。

newAuthority(perm: PermissionType, level: PermissionLevel): Authority {
    return Authority.of(perm, level);
}

当我将指令值指定为[{'permission': PermissionType.USER_CREATE, 'level': PermissionLevel.ACCOUNT_OWN}]时,它现在正在工作。但是,我想使用一个函数,因此很容易在HTML中定义权限。

0 个答案:

没有答案