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(() => ...)
返回值的计算转移到服务中,那么您可以从整个应用程序中访问它。您可以创建一个指令并将其添加到注入服务的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 正文中未转义的“#”字符已弃用;如何在项目中找到?