无论何时';儿童';属性在Angular2中应用
无论何时应用“children”属性,它都会给出一个错误,即“找不到路由”,尽管它们已正确写入 以下是错误的屏幕截图: 代码如下: app.module.ts无论何时';儿童';属性在Angular2中应用,angular,Angular,无论何时应用“children”属性,它都会给出一个错误,即“找不到路由”,尽管它们已正确写入 以下是错误的屏幕截图: 代码如下: app.module.ts import {NgModule} from '@angular/core'; import {BrowserModule } from '@angular/platform-browser'; import {Http, HttpModule} from
import {NgModule} from '@angular/core';
import {BrowserModule } from '@angular/platform-browser';
import {Http, HttpModule} from '@angular/http';
import { FormsModule } from '@angular/forms';
import { Router,RouterModule } from '@angular/router';
import {AppComponent} from "./app.component";
import {ComponentsComponent} from "./app/components/components.component";
import {TrainingComponent} from "./app/training/training.component";
import {ComponentsModule} from "./app/components/components.module";
import {TrainingModule} from "./app/training/training.module";
import {DemoHelloWorldComponent} from './app/training/helloWorld/demoHelloWorld.component';
import {HelloWorldComponent} from "./app/training/helloWorld/helloWorld.component"
import {CompositeComponentComponent} from './app/training/compositeComponent/compositeComponent.component';
import {TrainingComponentComponent} from './app/training/trainingComponent/trainingComponent.component';
import {TrainingModuleComponent} from './app/training/trainingModule/trainingModule.component';
import {RestServiceProviderComponent} from './app/training/restServiceProvider/restServiceProvider.component';
@NgModule({
imports: [
BrowserModule,
FormsModule,
HttpModule,
ComponentsModule,
TrainingModule,
RouterModule.forRoot([
{
path: 'training',
component:TrainingComponent,
children:[
{
path: 'hello-world',
component:HelloWorldComponent
},
{
path: 'training-component',
component:TrainingComponentComponent
},
{
path: 'training-module',
component:TrainingModuleComponent
},
{
path: 'composite-components',
component:CompositeComponentComponent
},
{
path: 'rest-service-provider',
component:RestServiceProviderComponent
}
]
},
{
path: 'demo-components',
component:ComponentsComponent,
}
]),
],
declarations:
[
AppComponent,
ComponentsComponent,
TrainingComponent,
HelloWorldComponent,
CompositeComponentComponent,
TrainingComponentComponent,
TrainingModuleComponent,
RestServiceProviderComponent,
DemoHelloWorldComponent
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
// Diagnostic only: inspect router configuration
constructor(router: Router) { }
}
尝试为训练添加默认路线,因为我认为这是必要的
path: 'training',
children:[
{
path: '',
component: TrainingComponent
}
(...)
你能把孩子的路线改成常规路线吗?我从未见过像您这样在AppModule上定义子路由的情况。在我看来,您希望在“培训功能”模块中定义这些子路由。当我在“培训功能”模块中移动它们时,它们工作正常,但替换主路由器插座以提供视图,这不是我想要的。您的“培训组件”模板中是否有路由器插座?子路由应加载到加载组件的路由器出口中。此外,如果要并排加载两个组件,则需要使用辅助路由。@birwin我在TrainingComponent模板中有一个路由器出口,但它忽略了这一点,并替换了主路由器出口。如何使用辅助路由?并添加到它
pathMatch:“full”