binding - navigationend - router events subscribe angular 4

Salida angular 2 desde la salida del enrutador

Question

Quiero hacer la navegación desde componentes secundarios que se procesan dentro de la salida del enrutador. Mi componente principal tiene una configuración de enrutador y quiero navegar manualmente en algún evento. Pero no sé cómo puedo pasar de niño a padre algunos datos (para la navegación) sin salida. Porque esta construcción no funciona

 <router-outlet (navigateTo)="navigateToMessagePart($event)"></router-outlet>

¿Cómo puedo hacerlo de la manera correcta? Tal vez navegar desde niño? Pero cómo puedo obtener métodos para padres de niño. ¡Muchas gracias por cualquier ayuda!

Answer 1

Cambié un poco de la respuesta de Antara Datta. Creé un servicio de suscriptor

import {Injectable} from ''@angular/core'';
import {Subject} from ''rxjs'';
@Injectable({
providedIn: ''root''
})
export class Subscriber<T>
{
protected observable = new Subject<T>();
public next(item: T)
{
this.observable.next(item);
}
public subscribe(callback: (item:T)=>void) {
this.observable.subscribe(callback);
}
}

Cada vez que necesito dos componentes para compartir información, inyecto este servicio en el constructor que se suscribe a él:

 constructor(protected layoutOptions: Subscriber<Partial<LayoutOptions>>)
{
layoutOptions.subscribe(options => this.options = Object.assign({}, this.options, options));
}

y el que lo actualiza

constructor(protected router: Router, protected apiService: ApiService, protected layoutOptions: Subscriber<Partial<LayoutOptions>>)
{
this.layoutOptions.next({showNavBar: false});
}

Answer 2

La respuesta dada anteriormente es correcta y completa. Solo quiero agregar para aquellos a quienes la solución no les funcionó, que deberían agregar el servicio a los proveedores solo en el componente principal y no en el secundario para garantizar que obtengan un singleton del servicio; de lo contrario, dos instancias de servicio serán creado. Esta respuesta está inspirada en el comentario de @HeisenBerg en la respuesta anterior.

Answer 3

<router-outlet></router-outlet> es solo un marcador de posición para agregar componentes enrutados. No hay soporte para ningún tipo de enlace.

Puede crear un <router-outlet> que le permita hacer eso o, lo que es más común, usar un servicio compartido para comunicarse entre el componente principal y el componente enrutado.

Para más detalles ver https://angular.io/docs/ts/latest/cookbook/component-communication.html

actualizar

Ahora hay un evento que permite obtener el componente agregado

<router-outlet (activate)="componentAdded($event)" (deactivate)="componentRemoved($event)"></router-outlet>

que permite comunicarse (captadores de llamadas, establecedores y métodos) con el componente en componentAdded()

Sin embargo, un servicio compartido es la forma preferida.

Answer 4

<router-outlet></router-outlet> no se puede utilizar para emitir un evento desde el componente hijo. Una forma de comunicarse entre dos componentes es utilizar un servicio común.

Crea un servicio

shared-service.ts

import { Observable } from ''rxjs/Observable'';
import { Injectable } from ''@angular/core'';
import { Subject } from ''rxjs/Subject'';
@Injectable()
export class SharedService {
// Observable string sources
private emitChangeSource = new Subject<any>();
// Observable string streams
changeEmitted$ = this.emitChangeSource.asObservable();
// Service message commands
emitChange(change: any) {
this.emitChangeSource.next(change);
}
}

Ahora inyecte la instancia del servicio anterior en el constructor del componente primario y secundario.

El componente hijo emitirá un cambio cada vez que se llame al método onClick ()

child.component.ts

import { Component} from ''@angular/core'';
@Component({
templateUrl: ''child.html'',
styleUrls: [''child.scss'']
})
export class ChildComponent {
constructor(
private _sharedService: SharedService
) { }
onClick(){
this._sharedService.emitChange(''Data from child'');
}
}

El componente principal recibirá ese cambio. Para hacerlo, capture la suscripción dentro del constructor del padre.

parent.component.ts

import { Component} from ''@angular/core'';
@Component({
templateUrl: ''parent.html'',
styleUrls: [''parent.scss'']
})
export class ParentComponent {
constructor(
private _sharedService: SharedService
) {
_sharedService.changeEmitted$.subscribe(
text => {
console.log(text);
});
}
}

Espero que esto ayude :)