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
    }

0 ответов

Другие вопросы по тегам