Angular 角度用户界面路由器2_Angular_Angular Ui Router

Angular 角度用户界面路由器2

angular

Angular 角度用户界面路由器2,angular,angular-ui-router,Angular,Angular Ui Router,我正在尝试实现中描述的一些多视图，但无法使其正常工作。我就是这么做的 import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { AppComponent }

我正在尝试实现中描述的一些多视图，但无法使其正常工作。我就是这么做的

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

标题

、

导航

和

内容

是我要显示的三个组件。它们目前非常简单，看起来与此类似：

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>



我正在使用AngularJS@2.4.8
和iu路由器-ng2@1.0.0-beta4

如果ui router的作者能够为多个视图提供一些可用的plunker示例，那就容易多了，但我找不到任何示例。
只要使用angular 2 router即可。在当前版本中使用angular早期版本的组件不是一个好决定
<body>
<my-app>
    <main-header></main-header>
    <router-outlet></router-outlet>
    <main-footer></main-footer>
</my-app>

]) 使用带有angular2+的ui路由器有什么特殊原因吗？在我看来，Angular2的路由器做了ui路由器可以做的所有事情。我们在生产中使用了带有Angular1的ui路由器，所以我们认为我们可以使用它。Angular2是一个完全不同的野兽。。。如果我是你，我会研究核心路由器的能力，如果它符合你的要求，我会坚持使用它。我不认为ui路由器在Angular2+上很受欢迎。你是如何解决加载本地css的问题的？我在index.html中链接了它们，但是从cdn中获得了一些样式，一些本地样式。相对于index.html，您可能有错误的样式方式？现在我正在使用webpack将所有样式捆绑在一起。
export const routes: Routes = [
{path: '', component: HomeView},
{path: 'contactUs', component: ContactUsView},
{path: 'ourService/:id', component: OurServiceView}