如何从子路由导航到父路由 - TypeScript

在Angular应用程序中，通常会使用子路由来显示父组件（如AppComponent）的子元素。 在这种情况下，您可能需要从子路由导航到父级路由（如AppComponent）。

以下是如何在TypeScript中实现此操作的代码片段。

import { Router } from '@angular/router';
import { Component } from '@angular/core';

@Component({
  selector: 'app-child-component',
  templateUrl: './child-component.html',
})
export class ChildComponent {
  constructor(private router: Router) {}

  goToParentRoute() {
    this.router.navigate(['../'], { relativeTo: this.route.parent });
  }
}

在上面的代码片段中，我们导入了Router和Component，并使用@Component装饰器定义了一个名为ChildComponent的组件。 该组件包含一个名为goToParentRoute的函数，该函数在调用时将使用Router服务导航到父级路由。

使用Router服务的navigate函数，我们可以为所需路由指定路径，并使用relativeTo选项将其相对于当前路由的父级路由进行定义。在这里，我们使用this.route.parent来指定父级路由。

最后，我们可以在HTML模板中调用goToParentRoute函数，以在单击时导航到父级路由。

## 总结

在Angular中，使用子路由显示父组件的子元素是常见的情况。 当您需要在子路由中导航到父级路由时，您可以使用`Router`服务的`navigate`函数，并使用`relativeTo`选项将该路由相对于当前路由的父路由进行定义。