Angular2嵌套子路由无法正常工作。我的页面包含嵌套子路由的结构如下:
-Home
-Signup ->
User1 ->
Result ->
1.Todo1_Query -> Todo1_QueryID
2.Todo2_Query -> Todo2_QueryID
3.Todo3_Query -> Todo3_QueryID
当我点击Todo1_Query(这是最终结果)时,它应该能够显示在同一个地方(群集)上,但它显示一个错误消息,表示找不到任何数据。
404:页面缺失
有谁知道它是如何工作的?感谢。
app.component.ts
app.component.ts
export const ROUTES: Routes = [
{ path: '', component: HomeComponent },
{ path: 'home', component: HomeComponent },
{ path: 'signup', component: SignupComponent, resolve: { db: DBReady } },
{ path: 'user', component: UserComponent, canActivate: [DBLoggedIn] },
{
path: 'user',
component: UserComponent, canActivate: [DBLoggedIn],
children: [
{
path: "",
component: UserComponent
},
{
path: 'Result',
component: ResultComponent,
children: [
{
path: 'todo1',
component: Todo1Component,
children: [{
path: ':id',
component: Todo1SelectionComponent
}]
},
{
path: 'todo2',
component: Todo2Component,
children: [{
path: ':id',
component: Todo2SelectionComponent
}]
},
{
path: 'todo3',
component: Todo3Component,
children: [{
path: ':id',
component: Todo3SelectionComponent
}]
}
]
}
]
},
{ path: '**', component: NoContentComponent },
];
todo1.component.ts
import { Todo1SelectionComponent } from './todo1-selection';
@Component({
selector: 'todo1-app',
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
template: `
<h5>{{title}}</h5>
<div *ngFor="let item of Todo1" class="panel panel-info" [routerLink]="['/todo1', item.key]">
{{ item.name }} </div>
`
})
export class Todo1Component implements OnInit, OnChanges {
public Todo1: Array <model.Todo>;
public title = 'Todo1';
@Input() Todo1: Array <model.Todo>;
@ViewChild(Todo1SelectionComponent) todo1selection: Todo1SelectionComponent;
constructor(private router: Router, private route: ActivatedRoute) {
}
ngDoCheck() { }
ngOnChanges() { }
}
ngOnInit() {
console.log("Todo1Component");
}
}
ngAfterViewInit() {
console.log("ngAfter");
}
}
ngOnDestroy() { }
}
result.component.ts
@Component({
-> html url
select checkbox
button function submit()
->
-> children in panels
-> 1.todo1
<todo-app1 [todo1]=todo1></todo-app1>
<router-outlet></router-outlet>
->2.todo2
<todo-app2 [todo2]=todo2></todo-app2>
< router-outlet></router-outlet>
->3.todo3
<todo-app3 [todo3]=todo3></todo-app3>
<router-outlet></router-outlet>
-> end panel
->
})
export class resultComponent implements DoCheck, OnChanges, OnInit {
public todo1: Array <model.Todo>;
public todo2: Array <model.Todo>;
public todo3: Array <model.Todo>;
@ViewChild(Todo1Component) todo1Component: Todo1Component;
@ViewChild(Todo2Component) Todo2Component: Todo2Component;
@ViewChild(Todo3Component) Todo3Component: Todo3Component;
submit(){
this.todo1=data1;
this.todo2=data2;
this.todo3=data3;
} }
答案 0 :(得分:0)
请参阅代码中的以下行
{ path: 'user', component: UserComponent, canActivate: [DBLoggedIn] },
{
path: 'user',
component: UserComponent, canActivate: [DBLoggedIn],
children: [
user
路线重复两次。那就是问题