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

从角度上讲，可以将用作所有组件的父组件以及其他所有组件的父组件的根组件称为根组件的子组件。该结构采用树的形式，其中作为孩子父级的组件位于子组件上方，并且它们之间没有直接链接，但是通常，可以通过两种方式从子组件路由父组件。 ：

1. 如果将子代链接到父代，则直接使用routerLink指令。
2. 在触发事件发生导航的情况下，使用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 { }

完成后，可以使用这两种方法中的任何一种从孩子路由到父母。
句法：

要为任何组件以角度注册路由，请在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路径进行注册，URL会将相应的路径映射到相应的组件。

基本示例和说明

• 使用routerLink指令：

这是最简单的方法，可用于重定向到整个项目的任何组件。它在模板中用作选项，其作用等同于anchor标记中的href选项，不同之处在于，它会将锚链接到角度项目中的组件。

它用作锚标记中的指令。子模板文件代码如下：

html

    
    
    


     
     
               Redirect message to parent
      

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() {
 
  }
  
}

在message变量中，将接收参数并存储message。它使用ActivatedRoute类捕获。

html

    
      
    

 
On the Parent page 
 
 

    Message By Child is {{message}}

 

• 使用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()，以执行重定向操作并将消息发送到父组件。子项的模板文件如下所示：

html

    
    
    


     
     
         Click to redirect
      

输出：