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