Angular6,当父级传递的属性更新时,子Input()属性不会更改

时间:2018-07-20 23:49:25

标签: angular ngonchanges angular-lifecycle-hooks

我有一个子组件,该子组件接收两个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 个答案:

没有答案