Я играл с Angular 2 webpack starter здесь, который содержит массу полезных примеров. Тем не менее, я столкнулся с проблемой маршрутизации. Я удалил несколько модулей и добавил один из моих собственных, в котором есть дети (я все еще не уверен, что использование дочерних модулей или дочерних компонентов будет лучшей практикой - я сейчас пытаюсь это использовать с компонентами).
Моя цель состоит в том, чтобы иметь возможность переключаться между модулями верхнего уровня как обычно (Home и About, в данном случае), но после загрузки моего модуля Home поменяйте местами между несколькими дочерними компонентами (или модулями, если это лучше поддерживается) в шаблоне модуля Home.
Я пытаюсь использовать другой <router-outlet> внутри Home - я пробовал именовать его и использовать параметр outlet в определении маршрутизации модуля Home, но нажав ссылки для загрузки внутри Home doesn В настоящее время работает. Код ниже:
Это моя текущая структура приложения (с большинством лишних материалов в веб-папке):
app
|-app.component.ts (template contains router-outlet)
|-app.module.ts
|-app.routes.ts
|-about
|-about.component.ts
|-about.component.html
|-home
|-home.module.ts
|-home.component.ts
|-home.component.html (contains router outlet for children)
|-home.routes.ts
|-signup
|-signup.component.ts
|-signup.component.html
|-login
|-login.component.ts
|-login.component.html
Это мой app.component, который почти такой же, как и в стартовом репо, я просто добавил ссылку на свой собственный модуль и удалил остальные:
app.component.ts
import {
Component,
OnInit,
ViewEncapsulation
} from '@angular/core';
@Component({
selector: 'app',
encapsulation: ViewEncapsulation.None,
styleUrls: [
'./app.component.css'
],
template: `
<nav>
<a [routerLink]=" ['./home'] " routerLinkActive="active">
Home
</a>
<a [routerLink]=" ['./about'] " routerLinkActive="active">
About
</a>
</nav>
<main>
<router-outlet></router-outlet>
</main>
`
})
export class AppComponent implements OnInit {
constructor(
public appState: AppState
) {}
public ngOnInit() {
console.log('Initial App State', this.appState.state);
}
}
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import {
NgModule,
ApplicationRef
} from '@angular/core';
import {
removeNgStyles,
createNewHosts,
createInputTransfer
} from '@angularclass/hmr';
import {
RouterModule,
PreloadAllModules
} from '@angular/router';
/*
* Platform and Environment providers/directives/pipes
*/
import { ENV_PROVIDERS } from './environment';
import { ROUTES } from './app.routes';
// App is our top level component
import { AppComponent } from './app.component';
import { APP_RESOLVER_PROVIDERS } from './app.resolver';
import { AppState, InternalStateType } from './app.service';
import { AboutComponent } from './about';
import { HomeModule } from './home';
import { XLargeDirective } from './home/x-large';
// app services needed globally
import { AuthenticationService, UserService, AlertService } from './shared';
import '../styles/styles.scss';
import '../styles/headings.css';
// Application wide providers
const APP_PROVIDERS = [
...APP_RESOLVER_PROVIDERS,
AppState
];
type StoreType = {
state: InternalStateType,
restoreInputValues: () => void,
disposeOldHosts: () => void
};
/**
* `AppModule` is the main entry point into Angular2 bootstraping process
*/
@NgModule({
bootstrap: [ AppComponent ],
declarations: [
AppComponent,
AboutComponent,
NoContentComponent,
XLargeDirective
],
imports: [ // import Angular modules
BrowserModule,
FormsModule,
HttpModule,
RouterModule.forRoot(ROUTES, { useHash: true, preloadingStrategy: PreloadAllModules })
],
providers: [ // expose our Services and Providers into Angular dependency injection
ENV_PROVIDERS,
APP_PROVIDERS,
UserService,
AuthenticationService,
AlertService
]
})
export class AppModule {
constructor(
public appRef: ApplicationRef,
public appState: AppState
) {}
}
app.routes.ts
import { Routes } from '@angular/router';
import { HomeModule } from './home';
import { AboutComponent } from './about';
import { DataResolver } from './app.resolver';
export const ROUTES: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'about', component: AboutComponent },
{ path: 'home', loadChildren: './home#HomeModule' },
{ path: '**', redirectTo: '/home', pathMatch: 'full' }
];
Навигация к моему модулю Home отлично работает - я думаю, что проблема заключается в маршрутизации внутри него. Это модуль Home, компонент и маршрутизация.
home.module.ts
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { routes } from './home.routes';
import { HomeComponent } from './home.component';
import { SignupComponent } from './signup/signup.component';
import { LoginComponent } from './login/login.component';
console.log('`Home` loaded');
@NgModule({
declarations: [
// Components / Directives/ Pipes
HomeComponent,
SignupComponent,
LoginComponent
],
imports: [
CommonModule,
FormsModule,
RouterModule.forChild(routes),
],
})
export class HomeModule {
public static routes = routes;
}
home.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'home',
styleUrls: [ './home.component.css' ],
templateUrl: './home.component.html'
})
export class HomeComponent implements {
}
home.component.html
<h1>Home</h1>
<div>
<h2>Hello from home module</h2>
</div>
<span>
<a [routerLink]=" ['./signup'] ">
Sign Up
</a>
</span>
<span>
<a [routerLink]=" ['./login'] ">
Login
</a>
</span>
<router-outlet name="aux"></router-outlet>
<div>
<h2>Bottom info</h2>
</div>
home.routes.ts
import { HomeComponent } from './home.component';
import { SignupComponent } from './signup/signup.component';
import { LoginComponent } from './login/login.component';
export const routes = [
{ path: '',
component: HomeComponent,
children: [
{
path: 'signup',
component: SignupComponent,
outlet: 'aux'
},
{
path: 'login',
component: LoginComponent,
outlet: 'aux'
}
] }
];
Текущее поведение заключается в том, что ничего не происходит, когда я нажимаю одну из ссылок для Signup или Login - никаких ошибок, но компоненты не загружаются в маршрутизатор aux.
Я пробовал настраивать Signup как модуль, но это еще не сработало для меня - я думаю, что есть какая-то дополнительная конфигурация, которую я не понимаю, и решил, что обращение с детьми как компонентами поможет мне понять основная требуемая маршрутизация.
Исследуя этот вопрос, кажется, что несколько маршрутизаторов не поддерживаются, особенно используя их с синтаксисом router-link, пока вокруг RC5. Этот недавний ответ по аналогичному вопросу предполагает, что он работает сейчас, но аналогичный синтаксис для меня не работает.
Является ли проблема с вложенным router-outlets? Должен ли я определять компоненты Signup и Login как модули вместо этого? Или есть какая-то другая проблема в целом с тем, как я определил маршрутизацию, возможно, на самом верхнем уровне AppModule?
ИЗМЕНИТЬ
Я добавил вопрос app.module.ts. Кроме того, посмотрев на базовую конфигурацию стартового проекта, который я использовал, кажется, что использование дочерних модулей может упростить вещи, в частности модуль barrel (видимый здесь) имеет модуль child-barrel и загружается в router-outlet, присутствующий в шаблоне barrel.component. Если бы существовал модуль child-barrel-2 на том же уровне, это было бы тем, что я ищу.
Я также нашел этот вопрос, где верхний ответ гласит, что
Рекомендуемые модули
Должен ли я пытаться имитировать структуру стартера, где отношения родитель-ребенок выполняются с помощью модулей?