从其父级导航 <router-outlet>

Question

我正在尝试从其父项更改 a 中的活动组件。看看如何 Ionic does it，我认为它应该类似于这个（非常简化）：

@Component({
    template: '<router-outlet></router-outlet>'
})
export class MyComponent {
    @ViewChild(RouterOutlet) router: RouterOutlet;

    foo() {
        this.router.navigate('/route');
    }
}

显然这行不通。有什么办法可以做类似的事情吗？

提前致谢！

Answer 1

而不是@ViewChild(RouterOutlet) router: RouterOutlet;，您应该将它注入到组件的构造函数中。而不是使用 RouterOutlet，而是使用 Router。您的组件将如下所示：

@Component({
    template: '<router-outlet></router-outlet>'
})

export class MyComponent {
    constructor(router: Router) {}

    foo() {
        this.router.navigateByUrl('/route');
    }
}

此外，您需要确保您已经在应用程序模块中包含 RouterModule 和您的网址列表。

从其父级导航 <router-outlet>

Navigating a <router-outlet> from its parent

angular

typescript

angular2-routing

router-outlet