Cómo detectar el cambio de un componente a otro
Angular 4.Fuente de Github
Tengo un menú que se llena con un servicio web. El servicio web está en taskService, pero no es necesario ahora.
ngOnInit() {
this.getTasks();
}
getTasks(): void {
this.taskService.getTasks()
.subscribe(Tasks => this.tasks = Tasks);
}
Cuando hace clic en una tarea, carga una página, un componente diferente, con un formulario listo para actualizar los datos. También está hecho por un servicio web y funciona bien.El problema es que después de actualizar la tarea, no se refleja en el menú de tareas
Estoy importando esto:
import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
y agregando esto al constructor:
private cdRef: ChangeDetectorRef
Y este es mi mejor enfoque para la función detectChanges (),después de actualizar los datos con la función save ()
this.taskService.updateTask(task, id)
.subscribe(
this.Ref.detach();
setInterval(() => {
this.Ref.detectChanges();
}, 5000);
);
Este es el html del menú para imprimir las tareas:
<li *ngFor="let task of tasks" class="d-inline-block col-md-12">
<a routerLink="/task/{{task.id}}" > {{task.title}}</a>
<!-- <span class="close big"></span> -->
<button class="close big" title="delete task"
(click)="delete(task)">x</button>
</li>
Y este es el formulario que actualiza la tarea.
<form (ngSubmit)="save(taskName.value, taskBody.value)" #taskForm="ngForm" class="example-form">
<mat-form-field class="example-full-width">
<label>Task Name</label>
<input matInput [(ngModel)]="task.name" #taskName name="name">
</mat-form-field>
<mat-form-field class="example-full-width">
<textarea matInput [(ngModel)]="task.body" #taskBody name="body"></textarea>
</mat-form-field>
<button type="submit" class="btn btn-success" >Save</button>
</form>
Ambos están en diferentes componentes.
He tratado de seguir estotutorial, pero estoy atascado, no sé cómo usar ChangeDetectorRef.