Angular 2 路由已弃用:如何检测 CanActivate?

Posted

技术标签:

【中文标题】Angular 2 路由已弃用:如何检测 CanActivate?【英文标题】:Angular 2 routing-deprecated: How to detect CanActivate? 【发布时间】:2016-09-10 19:50:30 【问题描述】:

我有一个用@CanActivate 装饰的组件。

@Component(
    // ...
)
@CanActivate(() => false)
export class UserManagementComponent 
    // ...

在我的导航菜单中,我想禁用或隐藏导航到此路线的链接。我该怎么做呢?

<a [routerLink]="['UserManagement']">User management</a>

PS:我仍在使用已弃用的路由机制,而不是 rc1 版本。

【问题讨论】:

我猜返回值并不总是静态的false,这仅适用于这个例子?通常是根据一些条件计算出来的。 确实,只是为了保持示例简单。 【参考方案1】:

如果您将 @CanActivate(() =&gt; ...) 返回值的计算转移到服务中,那么您可以从整个应用程序中访问它。您可以创建一个指令并将其添加到注入服务的routerLink 中,并在路由条件返回false 时禁用routerLink

请参阅http://almerosteyn.com/2016/04/linkup-custom-control-to-ngcontrol-ngmodel,了解如何在@CanActivate 中使用DI。

请参阅 Angular 2, disable routerLink 和 Angular2, what is the correct way to disable an anchor element? 了解如何禁用 routerLink

【讨论】:

【参考方案2】:

我相信注入服务是一种可行的方法,因为如果您需要从其他附加组件路由到您的组件,这会容易得多,而且您不必复制反射代码。

话虽如此,我确实很好奇如何进行反射。所以它似乎应该被添加到 ES7 规范中。目前,'reflection-metadata' 包 pollyfills 并且这也是 Angular2 内部使用的。虽然 'Reflect' 已经是 TypeScript 库的一部分,但我没有找到任何元数据反射,似乎它只支持对象反射。

//This is a bit hacky, but it might help.
...
export class Test 
    ...
    logType(target : any, key : string) 
        //stop TypeScript from mapping this to TypeScript Reflect.
        var Reflect = Reflect || ; 

        //You still get an error if you havn't added the Reflect.js script in the page
        var t = Reflect.getMetadata("design:type", target, key);

        console.log('key:' + key + ' type: ' + t.name);
    
    ...

来源:

http://blog.wolksoftware.com/decorators-metadata-reflection-in-typescript-from-novice-to-expert-part-4

https://www.npmjs.com/package/reflect-metadata

【讨论】:

以上是关于Angular 2 路由已弃用:如何检测 CanActivate?的主要内容,如果未能解决你的问题,请参考以下文章

Angular 6 ng lint combineLatest 已弃用

Vue 路由器 addRoutes 已弃用,但我想向 Vue 路由器添加路由数组

数据 URI 正文中未转义的“#”字符已弃用;如何在项目中找到?

已弃用的 Javascript 操作系统检测技术

替代已弃用的 AudioManager.isWiredHeadsetOn?

rxjs Subject.create 已弃用-我应该改用啥?