Демо-переменная в дочернем компоненте ngOnChanges не работает

Question

В child.component.ts хотя. Я использую демо-переменную с input (). * не отображается в консоли разработчика

app. html

<input type="text" placeholder="text" #val>
<br>
<button (click)="submitValue(val)">submit</button>
<app-child [myValue]="value"></app-child>

app.comp onet .ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'cat';


  value : string;
  submitValue(val){

    this.value=val.value;

    console.log(this.value);
  }
}

child. html

<p>from child...!</p>
<strong>{{myValue}}</strong>

child.component.ts

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

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

  constructor() { 

    console.log('constructor called');

  }

  @Input() myValue='ux trend';
  @Input() demo='';

  ngOnInit() {
  console.log('onInit called');

  }

  ngOnChanges(changes : SimpleChanges){

    console.log(changes);
  }

}

В консоли разработчика Chrome я вижу следующее:

{myValue: SimpleChange}
myValue: SimpleChange {previousValue: undefined, currentValue: undefined, firstChange: true}
__proto__:
constructor: ƒ Object()
__defineGetter__: ƒ __defineGetter__()
__defineSetter__: ƒ __defineSetter__()
hasOwnProperty: ƒ hasOwnProperty()
__lookupGetter__: ƒ __lookupGetter__()
__lookupSetter__: ƒ __lookupSetter__()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toString: ƒ ()
valueOf: ƒ valueOf()
toLocaleString: ƒ toLocaleString()
get __proto__: ƒ __proto__()
set __proto__: ƒ __proto__()

Демонстрационная переменная с input (). он не отображается в консоли разработчика.

Отображается только myValue

Answer 1

Демонстрационная переменная с input (). он не отображается в консоли разработчика.

Да, поскольку вы не передаете его для ChildComponent.

Текущий код:

<app-child [myValue]="value"></app-child>

Таким образом, чтобы обнаружить это,

<app-child [myValue]="value" [demo]="someAmazingText"></app-child>

---

Если вы хотите проверить, изменилась ли переменная myValue или хотите получить доступ к текущему значению, тогда вы должны использовать:

ngOnChanges(changes: SimpleChange }) {
  if(changes['myValue'] && changes['myValue'].previousValue != changes['myValue'].currentValue)
  {
    console.log('The latest value', changes['myValue'].currentValue);
  }
}

Answer 2

Работает как положено. Изначально вы отправляете переменную value без присвоения ей какого-либо значения. Так что это отправка undefined. Обратите внимание myValue: SimpleChange {previousValue: undefined, currentValue: undefined, firstChange: true}. И previousValue, и currentValue являются undefined, потому что вы отправили неопределенное.

Чтобы увидеть изменения, введите значение в поле ввода и нажмите «Отправить». Теперь новое значение должно быть доступно в changes['myValue'].currentValue в вашем дочернем компоненте.

Здесь - это бит стека для вашего кода. Я ничего не изменил.