Угловой ui-router 2

Я пытаюсь реализовать несколько видов, как описано в link, но не может заставить это работать. Вот что яУгловой ui-router 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 с угловым2 +? Кажется мне, как маршрутизатор Angular2 делает все, что может сделать ui-router. – AngularChef

Мы использовали ui-router с Angular 1 в производстве, поэтому мы подумали, что можем использовать его дальше. –

Angular 2 - это совершенно другой зверь. Если бы я был вами, я бы изучил возможности основного маршрутизатора и придерживался его, если он соответствует вашим требованиям. Я не думаю, что ui-router очень популярен у Angular2 +. – AngularChef

Просто используйте угловой 2-роутер. Это нехорошее решение использовать компоненты из предыдущей версии угловой с текущей версией.

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

Как, например. Main-header и main-footer будут присутствовать в этом приложении все время. Внутренние компоненты легко реализовать. Пример конфигурации маршрутов:

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

ответ

Смежные вопросы