Как обновить один компонент из другого - PullRequest
Новая
       16

Как обновить один компонент из другого

0 голосов
/ 18 апреля 2020

Я новичок в Angular и изучаю это сейчас. У меня проблема с обновлением свойства в одном компоненте из другого. У меня есть контейнерный компонент - app.component, и два одера - create.component и list.component. Я хочу создать простое строковое значение в create.component, а затем list.component должно быть обновлено, но без результата. Ниже приведен код, представляющий то, что я сделал.

app.component.ts 

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {
  myValues: string[];

  ngOnInit() {
    this.myValues = ['AAA', 'BBB', 'CCC'];
  }

  addValue(evt){
    this.myValues.push(evt);
  }
}

app.component. html

<app-create (newValue)="addValue($event)"></app-create>

<br><br>
<app-list [values]="myValues"></app-list>

create.component .ts 

import {Component, Output, EventEmitter} from '@angular/core';

@Component({
  selector: 'app-create',
  templateUrl: './create.component.html'
})
export class CreateComponent {
  @Output() newValue: EventEmitter<any> = new EventEmitter();
  value;

  createValue() {
    this.newValue.emit(this.value);
  }
}

create.component.html

<input type="text" [(ngModel)]="value"/><button (click)="createValue()">Add</button>

list.component.ts 

import { Component, Input, OnInit, OnChanges } from "@angular/core";

@Component({
  selector: "app-list",
  templateUrl: "./list.component.html"
})
export class ListComponent implements OnChanges {
  @Input() values;
  public lowercaseValues: string[] = [];

  ngOnChanges() {
    this.values.forEach(v => {
      this.lowercaseValues.push(v.toLowerCase());
    });
  }
}

list.component. html

<div *ngFor="let value of lowercaseValues">
  {{value}}
</div>

Сделать строчные значения в list.component просто пример действия с полученными данными.

Ответы [ 2 ]

1 голос
/ 18 апреля 2020

На самом деле это вопрос обнаружения изменений, поскольку в вашем случае свойство list.component не обновляется, это обнаружение изменений не срабатывает, и последнее значение массива myValues ​​ в app.component не отображается в list.component . Поэтому для запуска обнаружения изменений измените ссылку массива myValues ​​ следующим образом: 

 this.myValues.push(evt);
 this.myValues = [ ...this.myValues ]

Вторая строка фактически создаст новую ссылку и назначит существующую myValues ​​ массив.

0 голосов
/ 18 апреля 2020

Проблема в том, что myValues ​​в вашем случае является массивом, который является ссылкой. И вы хотите что-то изменить по ссылке. На самом деле это неправильный путь.

Я рекомендую вам изменить свой список и нарисовать полученный массив значений. Смотрите ссылку на стек стека: https://stackblitz.com/edit/angular-eshxvp

<div *ngFor="let value of values">
  {{value.toLowerCase()}}
</div>
...