Обновление представления для ngOnChanges из @Input в Angular - PullRequest
Новая
       47

Обновление представления для ngOnChanges из @Input в Angular

1 голос
/ 03 апреля 2019

У меня есть свойство @Input в моем дочернем компоненте типа Person, и я передаю объект из родительского компонента через атрибут

Полный рабочий код доступен в StackBlitz

Я исследовал следующий вопрос, и я понял, что то, что они сказали в ответе, но я попробовал Object.assign и другие вещи, основанные на ответе, но он не может загрузить данные в View.

Как я могу передать объект через @Input и как я могу сделать некоторые манипуляции после того, как объект достиг дочернего компонента иНужно обновить в представлении?

Пример кода:

Компонент приложения : 

import { Component } from '@angular/core';

import { Person } from './models/person'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  person: Person = {
    firstName: 'Emma',
    lastName: 'Watson'
  };
}

Компонент приложения HTML :

<user [user-profile]="person"></user>

Компонент пользователя : 

import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
import { Person } from '../models/person';

@Component({
  selector: 'user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit, OnChanges {

  @Input('user-profile') profile: Person;

  person: Person;

  constructor() {}

  ngOnInit() { 
    this.person = {
      firstName: '',
      lastName: ''
    }
  }

  ngOnChanges(changes:SimpleChanges): void { 
    if(typeof this.profile !== 'undefined' 
      && typeof this.profile.firstName !== 'undefined' 
      && typeof this.profile.lastName !== 'undefined') {
        this.person.firstName = this.profile.firstName;
        this.person.lastName = this.profile.lastName;
    }
  }

}

Компонент пользователя HTML : 

Full Name: {{person.firstName}} {{person.lastName}}

Мне нужно сделатьнекоторые манипуляции, как только я получил объект от @Input и нужно обновить его в пользовательском интерфейсе.Я знаю, что объект передается в качестве ссылки, но здесь я попытался с помощью Object.assign и назначил свойство с помощью undefined, а затем соответствующий объект ничего не работает.

Ответы [ 2 ]

2 голосов
/ 03 апреля 2019

Удаляет присвоение person из ngOnInit(), ngOnInit запускается после ngOnChanges, поэтому вы возвращаете значения обратно в пустое 

export class UserComponent implements OnInit, OnChanges {

  @Input('user-profile') profile: Person;

  person: Person = { firstName: '', lastName: '' };  // initialize it here

  constructor() {}

  ngOnInit() { 
    // this.person = {
    //   firstName: '',
    //   lastName: ''
    // }
  }

  ngOnChanges(changes:SimpleChanges): void { 



    if(typeof this.profile !== 'undefined' 
      && typeof this.profile.firstName !== 'undefined' 
      && typeof this.profile.lastName !== 'undefined') {
        console.log(this.profile)
        this.person.firstName = this.profile.firstName;
        this.person.lastName = this.profile.lastName;
        console.log(this.person)
    }
  }

}

https://stackblitz.com/edit/angular-input-ng-onchange-qiyghn?file=src%2Fapp%2Fuser%2Fuser.component.ts

2 голосов
/ 03 апреля 2019

Это потому что ngOnInit запускается после ngOnChanges. Таким образом, вы сначала устанавливаете его, но затем немедленно сбрасываете его внутри вашего ngOnInit.

См. здесь рабочий пример.

В основном измените свой атрибут person компонента на это: 

person: Person = {
  firstName: '',
  lastName: ''
};

и удалите ngOnInit.

Вы также можете использовать установщик на входе профиля, таким образом, вам не нужно ngOnChanges: 

@Input('user-profile') set profile(person: Person) {
  this.person.firstName = profile && profile.firstName || '';
  this.person.lastName = profile && profile.lastName || '';
}

person: Person = {
  firstName: '',
  lastName: ''
};
...