Angular2嵌套子路由不起作用

Question

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 },
 ];

tod​​o1.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;

    }  } 

Answer 1

在您的代码中查看以下行

{ path: 'user', component: UserComponent, canActivate: [DBLoggedIn] },
    {
        path: 'user',
        component: UserComponent, canActivate: [DBLoggedIn],
        children: [

user 路由重复两次。就是这个问题