Question

给出这样的模板

<a *ngIf="canAccess()" routerLink="/adminUsers">...</a>
<a *ngIf="canAccess()" routerLink="/link2">...</a>
<a *ngIf="canAccess()" routerLink="/otherlink">...</a>
<a *ngIf="canAccess()" routerLink="/somthingelse">...</a>

和一个功能：

canAccess()
{
    ...

我如何获得

路由器链接
该函数中的任何其他标记属性

感谢

Answer 1

更新模板

   <a *ngIf="canAccess($event)" routerLink="/adminUsers">...</a>

和您的组件

 canAccess(event){

    console.log(event.currentTarget);
    console.log(event.currentTarget.getAttribute("routerlink"));
    ..
    }

Answer 2

您可能需要：

Location获取当前网址。
UrlSegment。

将您需要的内容放入构造函数中，并在canAccess()中调用他们的方法。

此外，您可以使用Guard保护自己的路线（routerLink}）。

Answer 3

我的解决方案是创建一个指令及其相关组件，所以我只给它一个用户想要访问的模块

该指令询问服务是否已记录用户且可以访问该链接

如果是，则使用组件

重新进行链接

这是一个关于如何插入动态组件（不包含授权部分）的例子

import { Directive, Input, ComponentFactoryResolver,ViewContainerRef } from '@angular/core';
import { MenuItemComponent } from './menuItem.component';

@Directive({ selector: '[menuItem]' })
export class MenuItemDirective {

    constructor(
        private componentFactoryResolver: ComponentFactoryResolver,
        private viewContainer: ViewContainerRef) {}

    @Input() set menuItem(_link: string) {
        if(some sort of condition depending on a auth service)
        {
            const factory = this.componentFactoryResolver.resolveComponentFactory(MenuItemComponent);
            const menuItemComponentRef = this.viewContainer.createComponent(factory);
            menuItemComponentRef.changeDetectorRef.detectChanges();
        }
        else
            this.viewContainer.clear();
  }
}

可能有点矫枉过正，但最后我使用了

<a *menuItem="dashBoard"></a>

而不是

<a class="menuItemA menuRouterLinkA" routerLink="/dashBoard" routerLinkActive="menuCurrentLinkA" >{{ "DashBoard" }}</a>

它处理功能/页面/模块..访问授权： - ）

耶

Angular 2 - 如何在ngIf函数中获取标记属性

3 个答案: