Angular。为什么在 child 的组件中使用他的方法后我的组件视图没有改变？

Question

我使用 <add-person> 组件添加新人，在服务器响应成功后我调用了 addToList 方法（见下文）来自 <persons> 组件，新的 person-data 来自响应。好的，addToList 方法有效 (concole.log)，人员数组已更改，但视图不会在 <persons> 组件中再次呈现。有趣的是，如果我在 <persons> 组件中添加新人，即控制器中的 addPerson 方法，组件视图将使用新数据呈现。

我使用 *ngFor 呈现的服务器中的人员数组。

人组成 - parent

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'persons',
  template: `
    <div *ngFor="let person of persons">{{person.fullName}}</div>
  `,
  styleUrls: ['./persons.component.css']
})
export class PersonsComponent implements OnInit {

  persons;

  constructor(private route: ActivatedRoute) {
    this.persons = [];
  }

  ngOnInit() {
    this.getPersons();
  }

  getPersons() {
    // Get Data from the server using Resolve Service
    this.route.data.subscribe(persons => {
      this.persons = persons;
    });
  }

  addOnList(person) {
    this.persons.push(person);
  }

}

add-person组件 - child

import { Component, OnInit } from '@angular/core';
import { personService } from '../../../services/person/person.service';
import { personsComponent } from '../persons.component';

@Component({
  selector: 'add-person',
  templateUrl: './add.component.html',
  styleUrls: ['./add.component.css'],
  providers: [personsComponent] 
})
export class AddPersonComponent implements OnInit {

  constructor(
    private personService: personService,
    private personsComponent: personsComponent
  ) { }

  ngOnInit() { }

  addPerson(form) {
    let person = form.value;

    this.personService.addPerson(person).subscribe(person => {
      this.personsComponent.addOnList(person);
    });
  }

}

Answer 1

您对服务的想法是正确的。如果你想在组件之间共享数据，服务是一个很好的实现方式。

确保您的服务公开人员数组。它还可以包含您的 addPerson 方法（它看起来像吗？）

PersonsComponent 的代码应该如下所示：

 get persons() {
    return this.personService.persons;
 }

这将确保它始终从维护它的人员服务中获取正确的人员集。

Angular。为什么在 child 的组件中使用他的方法后我的组件视图没有改变？

Angular. Why view of my component not changing after used his methods in to the child's component?

angular2-template

angular