En angular, un componente raíz que sirve como componente principal de todos los componentes y el resto de los otros componentes se puede llamar componente secundario del componente raíz. Esta estructura tiene la forma de un árbol donde un componente que es el padre de un hijo se encuentra sobre el componente hijo y no hay un vínculo directo entre ellos, pero en general, un componente padre puede enrutarse desde el componente hijo a través de dos formas. :
- Usando directamente la directiva routerLink en caso de vinculación de hijo a padre.
- Uso de la clase de ruta en caso de que la navegación suceda en un evento desenstringdo.
Acercarse:
Antes de realizar las dos operaciones anteriores, es necesario registrar este componente en la instancia de la clase Route que se encuentra dentro del archivo app-routing.module.ts . Esto se usará más para navegar de niño a padre.
El enrutamiento debe definirse dentro del archivo app-routing.module.ts de la siguiente manera:
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 { }
Una vez hecho esto, se puede usar cualquiera de los dos métodos para enrutar a un padre desde un hijo.
Sintaxis:
Para registrar rutas en angular para cualquier componente, establezca la ruta y el nombre de clase del componente dentro del archivo app-routing.module.ts . La sintaxis para el mismo se da de la siguiente manera:
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}
];
Como los componentes son diferentes de las páginas web y, por lo tanto, deben registrarse con las rutas URL adecuadas, que asignarán la ruta respectiva al componente respectivo.
Ejemplos básicos y explicaciones
- Usando la directiva routerLink:
Este es el método más simple que se puede usar para redirigir a cualquier componente en todo el proyecto. Se usa dentro de la plantilla como una opción que actúa equivalente a la opción href en la etiqueta de anclaje, la diferencia es que vincula un anclaje a los componentes dentro del proyecto angular.
Se utiliza como directiva dentro de la etiqueta de anclaje. El código del archivo de la plantilla secundaria se proporciona de la siguiente manera:
html
<!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>
El routerLink se establece en la ruta del componente principal. Solo para sumar, la directiva queryParams se usa para enviar un mensaje al componente principal a través de la string de consulta.
En el archivo del componente principal, se puede acceder al parámetro de consulta de la siguiente manera:
@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() {
}
}
Dentro de la variable del mensaje se recibe el parámetro y se almacena el mensaje. Captura utilizando la clase ActivatedRoute.
html
<!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>
- Usando el método Route.navigate():
En esto usaremos la clase Route del módulo @angular/route . El objeto de ruta se usa para enrutar a la página dinámicamente a través de un componente del archivo .ts. Este objeto tiene un método .navigate() para enrutar a diferentes módulos. Toma dos parámetros, el primero es la ruta de enrutamiento y el segundo es el objeto que consiste en información sobre los parámetros de consulta para enviar, la relación con la ruta para la ruta, etc. Este método se usa cuando existe la necesidad de desenstringr condicionalmente un evento a través de una plantilla. .
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'}});
}
}
El código anterior es para el archivo del componente secundario, dentro del cual se activa un método redirect_to_parent() usando un botón en la plantilla para realizar la acción de redirección y enviar un mensaje al componente principal. El archivo de plantilla para el niño se proporciona de la siguiente manera:
html
<!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>
Producción:
Publicación traducida automáticamente
Artículo escrito por piyush25pv y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA