使用EventEmitter時，為什么我的Angular頁面沒有刷新？

Question

當我的EventEmitter發出事件時，我的角度SPA不會刷新。

這是子組件中的EventEmitter ：

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { Todo } from '../todo';

@Component({
  selector: 'app-add-todo',
  templateUrl: './add-todo.component.html',
  styleUrls: ['./add-todo.component.css']
})
export class AddTodoComponent implements OnInit {
  newTodo: Todo = new Todo();

  @Output() addTodoEvent: EventEmitter<Todo> = new EventEmitter();

  constructor() { }

  addTodo() {
    this.addTodoEvent.emit(this.newTodo);
    console.log('event emitted');
    this.newTodo = new Todo();
    console.log('new todo created');
  }

  ngOnInit() {
  }

}

這是使用它的模板：

<div class="container">
  <app-add-todo (addTodoEvent)='onAddTodo($event)'></app-add-todo>
   // other template stuff
</div>

這是onAddTodo的聲明：

  onAddTodo(todo: Todo) {
    console.log('onAddTodo called');
    this.todoDataService.addTodo(todo);
  }

基本上，該應用程序可以工作，但是在進行任何更改后，我必須按F5刷新頁面。

要注意的一件事是，當我使用數組作為數據源時，此方法可以正常工作，但是當我轉到json-server和Observables時，頁面停止刷新。

我很高興提供任何可能需要的進一步信息。

更新：

這是addTodo ：

  addTodo(todo: Todo): void {
    this.aHttpService.post<Todo>(`http://localhost:3000/todos`, todo).subscribe(
      val => {
        console.log('POST call successful value returned in body', val);
      },
      response => {
        console.log('POST call in error', response);
      },
      () => {
        console.log('The POST observable is now completed.');
      }
    );
  }

列出待辦事項的完整代碼如下：

import { Component, OnInit } from '@angular/core';
import { Todo } from '../todo';
import { TodoDataService } from '../todo-data.service';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'app-todo-list',
  templateUrl: './todo-list.component.html',
  styleUrls: ['./todo-list.component.css']
})
export class TodoListComponent implements OnInit {
  constructor(private todoDataService: TodoDataService) {}

  completetodos: Observable<Array<Todo>>;
  incompletetodos: Observable<Array<Todo>>;

  onAddTodo(todo: Todo) {
    console.log('onAddTodo called');
    this.todoDataService.addTodo(todo);
  }

  toggleTodoComplete(todo) {
    this.todoDataService.toggleTodoComplete(todo);
  }

  removeTodo(todo) {
    this.todoDataService.deleteTodoById(todo.id);
  }

  editTodo(todo: Todo) {
    todo.editMode = true;
  }

  updateTodo(todo: Todo, editInput) {
    todo.title = editInput.value;
    todo.editMode = false;
    this.todoDataService.updateTodoById(todo.id, todo);
  }

  allTasks(): Observable<Array<Todo>> {
    return this.todoDataService.getAllTodos();
  }

  completedTodos(): Observable<Array<Todo>> {
    return this.todoDataService.completedTodos();
  }

  incompletedToDos(): Observable<Array<Todo>> {
    return this.todoDataService.incompletedTodos();
  }

  ngOnInit() {
    this.completetodos = this.completedTodos();
    this.incompletetodos = this.incompletedToDos();
  }
}

Answer 1

您的服務應返回如下所示的可觀察對象：

 addTodo(todo: Todo): void {
    return this.aHttpService.post<Todo>(`http://localhost:3000/todos`, todo);
 }

並在這樣的組件中使用它：

 onAddTodo(todo: Todo) {
    this.todoDataService.addTodo(todo).subscribe(val => {
       this.incompletetodos.push(val);
    });;
 }

（我最小化了代碼）

---

參考： https : //angular.io/tutorial/toh-pt6#add-a-new-hero

src / app / heroes / heroes.component.ts（添加）

add(name: string): void {
  name = name.trim();
  if (!name) { return; }
  this.heroService.addHero({ name } as Hero)
    .subscribe(hero => {
      this.heroes.push(hero);
    });
}

src / app / hero.service.ts（addHero）

/** POST: add a new hero to the server */
addHero (hero: Hero): Observable<Hero> {
  return this.http.post<Hero>(this.heroesUrl, hero, httpOptions).pipe(
    tap((hero: Hero) => this.log(`added hero w/ id=${hero.id}`)),
    catchError(this.handleError<Hero>('addHero'))
  );
}

---

使用EventEmitter時，為什么我的Angular頁面沒有刷新？

您可能會這樣想，我們正在使用Angular構建一個不會導致刷新整個頁面的單頁應用程序，我們只是更新了網站的一部分。

基本上，該應用程序可以工作，但是在進行任何更改后，我必須按F5刷新頁面。

因為每當您按F5鍵時，都會很好地重新初始化Angular應用程序，從而觸發此生命周期掛鈎：

ngOnInit() {
    this.completetodos = this.completedTodos();
    this.incompletetodos = this.incompletedToDos();
}

因此，您的應用程序反映了數據庫的最新數據。

有一點要注意的是，這個曾經我使用數組作為數據源時的工作，但我去的時候JSON服務器和觀測量， 頁面停止刷新 。

實際上，當您使用數組作為數據源時，我們的應用程序根本不會刷新。 這就是所謂的數據綁定 ，我們在UI上看到的數據被綁定到Angular應用程序保存的數據（在客戶端，在客戶端的內存中）。

與服務器通信時，當我們在服務器的數據庫中進行某些更改時，我們必須根據服務器的響應來更新客戶端的數據。 在這種情況下，這就是我們在您的Todo App中要做的事情。

Answer 2

成功保存待辦事項后，您必須更新可觀察對象

 onAddTodo(todo: Todo) {
this.todoDataService.addTodo(todo).subscribe(
      val => {
         // here you have to update the observables //incompletetodos.next(newTodo)
      },
      response => {
        console.log('POST call in error', response);
      },
      () => {
        console.log('The POST observable is now completed.');
      }
    );
}

您也不需要在這里訂閱

 addTodo(todo: Todo): void {
    return this.aHttpService.post<Todo>(`http://localhost:3000/todos`, todo);
  }

我認為push不適用於observable，您可以參考下面的鏈接將一個新項附加到incompletetodos observable數組中

如何將項目附加到Observable

如果您要使用BehaviorSubject（另一種類型的observable）代替Observable，則可以輕松添加一個新項目。 像下面這樣

incompletetodos: BehaviorSubject<Array<Todo>> = BehaviorSubject.empty<Array<Todo>>();

//您可以像下面這樣推送一個新項目

 incompletetodos.next(newTodo)