在angular中如何从一条子路线导航到一条父路线

在angular中，一个根组件是所有组件的父组件，其他的组件可以被称为根组件的子组件。这个结构是以树的形式存在的，作为子组件的父组件位于子组件的上方，它们之间没有直接的联系，但一般来说，父组件可以通过两种方式从子组件中获取。

在子代与父代联动的情况下，直接使用routerLink指令。
使用Route类，以便在触发的事件中发生导航。

步骤:

在执行上述两个操作之前，有必要在位于app-routing.module.ts文件内的Route类的实例中注册这个组件。这将被进一步用于从子代到父代的导航。

路由应该在app-routing.module.ts文件中定义，如下。

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ParentComponent } from './parent/parent.component';
import { ChildComponent } from './parent/child/child.component';


const routes: Routes = [
  {path: 'parent' , component: ParentComponent},
  {path: 'parent/child' , component: ChildComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

一旦完成，这两种方法中的任何一种都可以用来从一个子项目中路由到父项目。
语法:

要在angular中为任何组件注册路由，在app-routing.module.ts文件中设置组件的路径和类名。其语法如下。

import { Routes, RouterModule } from '@angular/router';
import { Component_1 } from 'path_to_component_1';
import { Component_2 } from 'path_to_component_2';

const routes: Routes = [
  {path: 'URL_mapping_component_1' , component: Component_1},
  {path: 'URL_mapping_component_2' , component: Component_2}
];

由于组件与网页不同，因此要用适当的URL路径来注册，这将把各自的路径映射到各自的组件。

基本的例子和解释

使用routerLink指令。

这是一个最简单的方法，可以用来重定向到整个项目的任何组件。它在模板中作为一个选项使用，相当于锚标签中的href选项，不同的是，它将一个锚链接到angular项目中的组件。

它被用作锚标内的指令。子模板文件代码给出如下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     
     <a [routerLink]=
     "[ '/parent']" [queryParams]="{GfG: 'Geeks for Geeks'}">
               Redirect message to parent
      </a>
</body>
</html>

routerLink被设置为父组件的路由。只是为了补充，queryParams指令被用来通过查询字符串向父组件发送消息。

在上级组件文件中，可以通过以下方式访问查询参数。

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {
  constructor( private activateRoute: ActivatedRoute) {
   }
   message = this.activateRoute.snapshot.queryParamMap.get('GfG')
  ngOnInit() {

  }

}

在消息变量中，参数被接收，消息被存储。它使用ActivatedRoute类进行捕捉。

<!DOCTYPE html>
<html>
    <head>
      <title>Page Title</title>
    </head>
<body>
 
<p>On the Parent page </p>
 
 
<p>
    Message By Child is {{message}}
</p>
 
</body>
</html>

使用Route.navigate()方法。

在这里我们将使用@angular/route模块中的Route类。路由对象是用来通过.ts文件的组件部分动态地路由到页面。这个对象有一个.navigate()方法来路由到不同的模块。它需要两个参数，第一个是路由路径，第二个是由要发送的查询参数信息组成的对象，与路由路径的相对性等。当需要通过模板有条件地触发一个事件时，该方法被使用。

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {

  constructor(
private router: Router, 
private activatedRoute: ActivatedRoute) {}

  ngOnInit(){}
  redirect_to_parent(){  
  this.router.navigate(["../../parent"], {
  relativeTo: this.activatedRoute, queryParams: 
        {GfG: 'Geeks for Geeks'}});
} 
}

上面的代码是针对孩子的组件文件的，在这个文件中，使用模板中的一个按钮触发了一个方法redirect_to_parent()，以执行重定向的动作，并向父组件发送一个信息。孩子的模板文件给出如下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     
     <button (click)="redirect_to_parent()">
         Click to redirect
      </button>
</body>
</html>

输出:

如何从一条子路线导航到一条父路线？