角ui路由器2

我想實現一些在link中描述的多個視圖，但不能得到這個工作。這是我做的角ui路由器2

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
import { AppComponent } from './app.component'; 
import {UIRouterModule} from 'ui-router-ng2'; 
import { Header } from './routes/header.component'; 
import { Navigation } from './routes/navigation.component'; 
import { Content } from './routes/content.component'; 

let rootState = { 
    name: 'root', url: '/', views: { 
    header: Header, 
    navigation: Navigation, 
    content: Content 
    } 
}; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    Header, Navigation, Content 
    ], 
    imports: [ 
    BrowserModule, 
    UIRouterModule.forRoot({states: [rootState], useHash: true}), 
    FormsModule, 
    HttpModule 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { 
}

Header，Navigation和Content是我想要顯示三個部分組成。他們是作爲現在很簡單，類似於此：

import { Component } from '@angular/core' 

@Component({ 
    templateUrl: './header.component.html' 
}) 
export class Header { }

和模板僅僅是一個字：

header

這裏是AppComponent：

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    title = "LES.AdministrationDesk" 
}

和它的模板：

<ui-view name="header"></ui-view> 
<ui-view name="navigation"></ui-view> 
<div ui-view="content"></div>

我使用的是[email protected]和[email protected]

如果ui-router作者會爲多個視圖提供一些有用的plunker示例，但我找不到任何東西。

來源

2017-02-19 N.Zukowski

使用ui-router與angular2 +的任何特定原因？在我看來，Angular2的路由器可以完成路由器可以完成的所有工作。 – AngularChef

我們在生產中使用了ui-router與Angular 1，所以我們認爲我們可以進一步使用它 –

Angular 2是一個完全不同的野獸......如果我是你，我會研究核心路由器的能力，並堅持下去符合你的要求。我不認爲ui-router在Angular2 +中很受歡迎。 – AngularChef

只需使用角度2路由器。使用以前版本的angular與當前版本的組件並不是一個好的決定。

<body> 
<my-app> 
    <main-header></main-header> 
    <router-outlet></router-outlet> 
    <main-footer></main-footer> 
</my-app>

舉例來說。主標題和主頁腳將始終存在於此應用程序中。內部組件也很容易實現。路由配置的示例：

export const routes: Routes = [ 
{path: '', component: HomeView}, 
{path: 'contactUs', component: ContactUsView}, 
{path: 'ourService/:id', component: OurServiceView}

];

來源

2017-02-20 20:36:57 vgoreiko

您是如何解決加載本地css問題的？我把它們鏈接在index.html中，但是得到404 –

cdn中的一些樣式，一些在本地。也許你有相對於index.html風格錯誤的方式？現在我正在使用webpack將所有樣式捆綁在一起。 – vgoreiko

回答

相關問題