page - Angular 2-¿Cómo escuchar un evento sin una plantilla?

router events angular 6

Question

El problema

Normalmente, en Angular 2, uno escucharía un evento a través de la siguiente sintaxis:

<my-elem (customEvent)="customEventProcessor"></my-elem>

Pero cuando uso un enrutador, ese host, <my-elem> , no existe en ninguna plantilla. En su lugar, hay un <router-outlet> , y mi componente se carga en la navegación. Por lo tanto, el quid de mi problema es, ¿cómo puedo forzar a mi anfitrión a escuchar mi evento personalizado sin depender de una plantilla?

Detalles opcionales

Supongamos que tengo una list-view elementos, que es un elemento secundario de mi componente raíz. list-view escucha un evento personalizado a través de la sintaxis normal:

<list-view (customEvent)="customEventProcessor()"></list-view>

Solo para estar completo, el componente de list-view que emite el evento también tiene una estructura predecible:

<button (click)="onDetailsClick(propertyOfInterest)">Click here</button>

La list-view envía el evento al padre mediante observación.

class ListView {
...
public onDetailsClick(property: string): void {
this.customEvent.next({ value: property });
}
}

y ese evento activa la función customEventProcessor() . Hasta ahora tan bueno. Sin embargo, cuando uso un enrutador para controlar si list-view está presente, no puedo (a mi entender) insertar un comando para monitorear algún evento.

No estoy seguro de cuál es el mejor enfoque para manejar este caso.

Answer 1

Este problema aún no se ha resuelto (consulte este tema de github ). Aquí está una de las posibles soluciones en este momento (vea este plunk ):

@Component({
selector: ''my-app'',
directives: [RouterOutlet, RouterLink],
template: `
<h1>{{ message }}</h1>
<a [router-link]="[''./MyElem1'']">MyElem1</a>
<a [router-link]="[''./MyElem2'']">MyElem2</a>
<router-outlet></router-outlet>
`
})
@RouteConfig([
{ path: ''/'', redirectTo: ''/my-elem1'' },
{ path: ''/my-elem1'', name: ''MyElem1'', component: MyElem1 },
{ path: ''/my-elem2'', name: ''MyElem2'', component: MyElem2 },
])
export class App {
message: string = ''Click on the button'';
@ViewChild(MyElem1) myElem1: MyElem1;
@ViewChild(MyElem2) myElem2: MyElem2;
constructor(router: Router) {
let subs = null;
router.subscribe(() => {
if (subs) { subs.unsubscribe(); subs = null; }
if (this.myElem1) {
subs = this.myElem1.customEvent1.subscribe(m=>this.processCustomEvent(m));
}
if (this.myElem2) {
subs = this.myElem2.customEvent2.subscribe(m=>this.processCustomEvent(m));
}
});
}
processCustomEvent(message) { this.message = message }
}