Kylo UI - 创建新的打字稿模块答案

【问题标题】：Kylo UI - Create new typescript moduleKylo UI - 创建新的打字稿模块
【发布时间】：2018-03-21 01:49:37
【问题描述】：

我对使用 Kylo 和 UI 结构的方式有疑问。

据http://kylo.readthedocs.io/en/v0.8.3/developer-guides/KyloDeveloperGuide.html?highlight=angular2 网站称：

Kylo UI 的大部分依赖于 AngularJS 和 AngularJS Material，但少数部分已升级到 Angular 2 和 Covalent。 新插件应使用 Typescript 编写并使用 Angular 2 以实现未来兼容性。

说新插件应该用 angular2 和 typescript 编写，但所有的例子和核心组件都是用 AngularJS 编写的。

一个例子是这个：https://github.com/Teradata/kylo/tree/master/samples/plugins/example-module/example-module-ui

我想知道该模块的 Typescript 和 Angular2 替代方案，包括路由，是否有任何实际示例？

【问题讨论】：

标签： angularjs angular user-interface module kylo

【解决方案1】：

我已经测试过，如果将代码直接添加到 kylo-ui-app 项目中，Angular 2 确实可以工作，但我认为 Kylo 的插件系统目前不支持 Angular 2。

与标准 Angular 2 的唯一区别是 Kylo 使用 UI-Router 而不是 Angular Router，但语法非常相似。根据记忆，我认为这些是我使用的步骤：

1) 向 routes.js 添加新路由：

{
  name: 'contacts.**',
  url: '/contacts',
  loadChildren: './contacts/contacts.module#ContactsModule'
}

2) 将子状态添加到您的模块中：

@NgModule({
  imports: [ UIRouterModule.forChild({ states: CONTACTS_STATES }), /* ... and any other modules */ ],
  declarations: [ ContactComponent, /* ... and any other components */ ],
  providers: [ ContactsDataService ],
})
export class ContactsModule { }

3) 每个状态的组件应该在views.content下指定：

{
  name: 'contacts',
  url: '/contacts',
  views: {
    "content": {
      component: ContactsComponent,
    }
  }
}

【讨论】：