我有一个子组件,它接收两个Input()绑定属性,然后绑定到子的html .
在父级中的值更改之后,我已经读过将调用ngOnChanges()生命周期方法 . 只有在第一次渲染孩子时才会调用它 .
文档说,@ Input ---声明一个数据绑定的输入属性,Angular在更改检测期间自动更新;
我不确定我是否必须在父comp中进行更改检测 .
继承人的代码 .
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
}