Ui-route在Angular-2中的使用

Question

我主要是在angular-2中对ui-router进行实验。我正在和你们分享我的代码……

app.module.ts :-

import {UIRouterModule} from "ui-router-ng2";

let helloState = { name: 'hello', url: '/hello',  component: HelloComponent };

let aboutState = { name: 'about', url: '/about',  component: AboutComponent };

@NgModule({

  imports:[
     UIRouterModule.forRoot({ states: [ helloState, aboutState ], useHash: false })
  ],

  declarations: [ AppComponent, DetailsComponent, HelloComponent, AboutComponent ],

  bootstrap:    [ AppComponent ]

})

app.component.ts :-

@Component({

  selector: 'my-app',

  template:`
        <a uiSref="hello" uiSrefActive="active">Hello</a>
        <a uiSref="about" uiSrefActive="active">About</a>
        <ui-view></ui-view>
      `
})

export class AppComponent {}

它工作正常..

但我担心的是，我希望将此路由隔离在不同的页面中。例如，我想创建另一个名为"uirouting.ts“的页面，在那里我将编写所有与路由相关的代码，然后将其注入到我的app.module.ts中

有没有人可以指导我，我怎么才能做到静态。

提前谢谢。

Answer 1

创建一个管理状态的子模块。将其导入到根应用程序模块中。

子模块：

import { NgModule } from "@angular/core";
import { UIRouterModule } from "ui-router-ng2";
import { Hello, About } from "./components";

/** States */
let helloState = { name: 'hello', url: '/hello',  component: Hello }; 
let aboutState = { name: 'about', url: '/about',  component: About };

/** Root Application NgModule */

@NgModule({
  imports: [ 
    UIRouterModule.forChild({ 
      states: [helloState, aboutState] 
    }),
  ],
  declarations: [ Hello, About ],
})
export class ChildModule {}

路由模块：

@NgModule({
  imports: [ 
    BrowserModule,
    UIRouterModule.forRoot(),
    ChildModule,
  ],
  declarations: [ App ],
  bootstrap: [ App ]
})
class RootAppModule {}

下面是一个从hello world https://plnkr.co/edit/2vGIu0N03Qk8MsE6emWV?p=preview派生出来的工作示例