子组件内使用@Input定义值product
import { Component, Input} from '@angular/core';
import {ProductModel} from '../../models/ProductModel';
@Component({
selector: "details_main",
templateUrl: './details.html',
styleUrls: ['./details.scss'],
providers: [],
})
export class DetailsComponent {
@Input() product:ProductModel;
constructor(
) {}
}
父组件
<details_main [product]="value"></details_main>
当父组件的value发生改变时 便会将值传到子组件
如果想在父组件传值时 在子组件内触发事件来编辑父组件传到子组件的值可使用OnChanges()
首先加如SimoleChanges
import { Component, Input, SimpleChanges } from '@angular/core';
然后使用ngOnChanges函数
ngOnChanges(changes: SimpleChanges) {
console.log(changes)
}
最终代码如下 这时父组件传值时就可以在子组件触发OnChanges()事件了
import { Component, Input, SimpleChanges } from '@angular/core';
import {ProductModel} from '../../models/ProductModel';
@Component({
selector: "details_main",
templateUrl: './details.html',
styleUrls: ['./details.scss'],
providers: [],
})
export class DetailsComponent {
@Input() product:ProductModel;
constructor(
) {}
ngOnChanges(changes: SimpleChanges) {
console.log(changes)
console.log(product)
}
}