Angular6, дочернее свойство Input() не изменяется, когда родительский объект передал обновления свойства
У меня есть дочерний компонент, который получает два связанных свойства Input(), которые затем связаны с HTML дочернего.
После изменения значения в родительском объекте я прочитал, что будет вызван метод жизненного цикла ngOnChanges(). Он вызывается только тогда, когда ребенок впервые отображается.
В документации сказано: @Input --- Объявляет свойство ввода с привязкой к данным, которое Angular автоматически обновляет при обнаружении изменений;
Я не уверен, что мне нужно что-то делать с обнаружением изменений в родительском компе.
Вот код.
import {
Component,
OnInit,
Output,
EventEmitter,
Input,
OnChanges, SimpleChanges, SimpleChange } from '@angular/core';
@Component( {
selector: 'app-time-lapse-form',
templateUrl: './time-lapse-form.component.html',
styleUrls: ['./time-lapse-form.component.css']
} )
export class TimeLapseFormComponent implements OnInit, OnChanges {
...
// Animation View Data
@Input() frameStartTime: string;
@Input() frameEndTime: string;
private _frameStartTime: string;
private _frameEndTime: string;
...
ngOnChanges( changes: SimpleChanges ) {
for (let propName in changes) {
let chng = changes[propName];
let cur = JSON.stringify(chng.currentValue);
let prev = JSON.stringify(chng.previousValue);
console.log(cur);
}
}
...
}
Родительский HTML
app-time-lapse-form *ngIf="currentView == 'timeLapse'"
(timeLapseData)="showTimeLapse($event)"
[frameStartTime]="currentFrameStart"
[frameEndTime]="currentFrameEnd"
app-time-lapse-form
Родительский компонент
export class MapAppComponent implements OnInit, OnDestroy {
...
currentFrameStart = null;
currentFrameEnd = null;
...
animateFrame() {
// Code that changes values here
}