TypeScript/Angular:向路由器中的数据属性添加接口

Question

在app-routing-module.ts文件中，我们可以使用data属性插入我们的自定义字段/变量，如下所示：

...
{
path: 'admin-board',
loadChildren: './admin-board/admin-board.module#AdminBoardPageModule',
data: {
role: 'admin'
}
},
...

我的问题是我们可以在data属性中添加一个interface吗？类似于：

import { Role } from './role';
...
{
path: 'admin-board',
loadChildren: './admin-board/admin-board.module#AdminBoardPageModule',
data: {
role: Role = { 
user: false, 
admin: true 
};
}
},
...

它确实给出了以下错误：

"角色"仅指类型，但用作值 这里.ts(2693(

我想出的修复方法是删除Role =产生：

import { Role } from './role';
...
{
path: 'admin-board',
loadChildren: './admin-board/admin-board.module#AdminBoardPageModule',
data: {
role: { 
user: false, 
admin: true 
};
}
},
...

但这违背了整个目的，因为我试图将role与界面Role相关联。

我还应该提到，我已经检查了路由器的官方文档，但找不到任何有助于我的情况的东西。

Answer 1

你不能这样做，没办法 - 我的意见，因为数据是一个对象键/值，由"："表示，并且在 TS 中定义类型，它是由"：">

完成的，所以......但是您可以做的是，从组件访问它的位置，您可以执行以下操作来获取智能感知：

const role: Role = this.route.snapshot.data['role'] as Role;

我希望它有所帮助。

Answer 2

你可以这样做。 我不确定它是否会实现您的目标：

import { Role } from './role';
...
{
path: 'admin-board',
loadChildren: './admin-board/admin-board.module#AdminBoardPageModule',
data: {
role: <Role> { 
user: false, 
admin: true 
};
}
},
...