我试图按照链接中描述的方式实现一些多个视图，但无法实现此功能。 这是我做的
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>我使用的是AngularJS@2.4.8和iu-router-ng2@1.0.0-beta4
如果ui-router作者会为多个视图提供一些可用的plunker示例，但是我找不到任何内容，那将会容易得多。
I am trying to implement some multiple views as described in the link but cannot get this working. Here is what I do
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 and Content are three components which I want to display. They are very simple as for now and look similar to this:
import { Component } from '@angular/core' @Component({ templateUrl: './header.component.html' }) export class Header { }and template is just a single word:
headerHere is AppComponent:
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = "LES.AdministrationDesk" }and its template:
<ui-view name="header"></ui-view> <ui-view name="navigation"></ui-view> <div ui-view="content"></div>I'm using AngularJS@2.4.8 and iu-router-ng2@1.0.0-beta4
It would be much easier if the ui-router author would provide some working plunker example for multiple views, but I cannot find any.
最满意答案
只需使用角度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}]。
Just use angular 2 router. It`s not a good decision to use components from previous version of angular with current version.
<body> <my-app> <main-header></main-header> <router-outlet></router-outlet> <main-footer></main-footer> </my-app>As for example. Main-header and main-footer will be present in this app all the time. Inner components is easy to implement too. Example of routes configuration:
export const routes: Routes = [ {path: '', component: HomeView}, {path: 'contactUs', component: ContactUsView}, {path: 'ourService/:id', component: OurServiceView}];
更多推荐
发布评论