具有 2 个子路由器的 Angular2 组件 - 不知道如何从一个子导航到另一个答案

【问题标题】：Angular2 component with 2 children routers - don't know how to navigate from one child to the other具有 2 个子路由器的 Angular2 组件 - 不知道如何从一个子导航到另一个
【发布时间】：2026-01-04 21:00:02
【问题描述】：

我有一个父组件，它定义了一个指向 2 个子组件的路由器，每个子组件都有一个路由器，类似于

家长

import { Component } from '@angular/core';
import { RouteConfig, ROUTER_DIRECTIVES, Router } from '@angular/router-deprecated';

import {Child1WithRouterComponent} from './childWithRouter1.component';
import {Child2WithRouterComponent} from './childWithRouter2.component';

@Component({
  selector: 'mex-app',
  template: `
        <h2>MEAN2 Examples</h2>
        <div style="width: 30%;float:left">
          <button type="button" style="width: 100%"
                  (click)="child1()">Child 1</button>
          <button type="button" style="width: 100%"
                  (click)="child2()">Child 2</button>
        </div>
        <div style="width: 70%;float:left">
          <router-outlet></router-outlet>
        </div>
        `,
  directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
  {path: '/child1/...', name: 'Child1', component: Child1WithRouterComponent, useAsDefault: true},
  {path: '/child2/...', name: 'Child2', component: Child2WithRouterComponent}
])
export class AppComponent { 
  constructor(private router: Router) {}

  child1() {
    this.router.navigate['Child1']
  }
  child2() {
    this.router.navigate['Child2']
  }
}

孩子1

    import { Component } from '@angular/core';
import { RouteConfig, ROUTER_DIRECTIVES, Router } from '@angular/router-deprecated';

import {GrandChild1Component} from './grandChild1.component';
import {GrandChild2Component} from './grandChild2.component';

@Component({
  selector: 'mex-child1',
  template: `
        <h3>Child with router</h3>
        <button type="button" 
                  (click)="goToGrandChild1()">GO TO GRAND CHILD1</button>
        <button type="button" 
                  (click)="goToGrandChild2()">GO TO GRAND CHILD2</button>
        <router-outlet></router-outlet>
        `,
  directives: [ROUTER_DIRECTIVES],

})
@RouteConfig([
  {path: '/grand-child-1', name: 'GrandChild1', component: GrandChild1Component},
  {path: '/grand-child-2', name: 'GrandChild2', component: GrandChild2Component}
])
export class Child1WithRouterComponent { 
  constructor(private router: Router) {}

  goToGrandChild1() {
    this.router.navigate(['GrandChild1'])
  }
  goToGrandChild2() {
    this.router.navigate(['GrandChild2'])
  }
}

Child2 与 Child1 相同，只是它的 RouteConfig 是

@RouteConfig([
  {path: '/grand-child-3', name: 'GrandChild3', component: GrandChild3Component},
  {path: '/grand-child-4', name: 'GrandChild4', component: GrandChild4Component}
])

父母应该能够以编程方式从 Child1 导航到 Child2，反之亦然，执行 this.router.navigate['Child1'] 或 this.router.navigate['Child2']。

不幸的是，当我尝试从 Child1（默认）导航到 Child2 时，没有任何反应。

提前感谢您的支持

【问题讨论】：

您是否尝试在GrandChildX 路由之一上设置useAsDefault: true？
不，我以编程方式从 ChildY 中选择 GrandChildX。我在 Parent RouteConfig 中指定了默认子节点，实际上我正确地落在了默认子节点上；一旦在默认的孩子上，我可以导航到它的孙子；但是当我单击父组件上的按钮导航到另一个子组件时，什么也没有发生。
我不明白你是如何以编程方式选择它的。当您导航到['ChildX'] 时，我认为需要一个默认的孙子，或者您在传递给navigate 的参数中指定一个，例如_this.router.navigate(['Child1', 'GrandChild1'])。如果其中一项能解决您的问题，您可以试试吗？

标签： angular angular-routing

【解决方案1】：

当您导航到 ['ChildX'] 时，我认为需要一个默认的孙子，或者您在传递的参数中指定一个以像

一样导航

_this.router.navigate(['Child1', 'GrandChild1'])

【讨论】：