角度2でのUiルートの使用

Question

私は主に角度2でuiルータで実験していました。それが正常に動作している

@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 {} 

... - ：

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 - ：私はあなたのすべて...

app.module.tsで自分のコードを共有しています

しかし、私はこのルーティングを別のページに分けたいと考えています。私がルーティング関連のコードを書いて、後で私はちょうど私のapp.module.tsにそれを注入する "uirouting.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 {} 

は世界 https://plnkr.co/edit/2vGIu0N03Qk8MsE6emWV?p=preview

ハローからフォーク、作業例です