TypeScript / Angular：在路由器的data屬性中添加接口

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 
    };
  }
},
...

它確實給出以下錯誤：

角色（Role）僅指類型，但在此處用作值.ts（2693）

我想出的解決方法是刪除Role = yield：

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中定義類型是由“：”完成的，所以...

但是您可以做的是從組件訪問它的位置，您可以執行以下操作以獲得IntelliSense：

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 
    };
  }
},
...