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

Angular 2 routing-deprecated: How to detect CanActivate?

本文关键字：何检测 检测 CanActivate 路由 Angular      更新时间：2023-09-26

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

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

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

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

PS：我仍然使用不推荐使用的路由机制，而不是rc1版本。

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

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

请参阅Angular 2，禁用routerLink和Angular2，禁用锚点元素的正确方法是什么？有关如何禁用routerLink

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

话虽如此，我确实很好奇如何进行反思。因此，它似乎应该被添加到ES7规范中。目前，"反射元数据"为它打包了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

相关文章：