在一个称为“ FoodComponent”的父组件中,我有两个这样的标签:
<mat-tab-group mat-stretch-tabs [color]='"accent"'>
<mat-tab label="pizza">
<dc-pizza [pizzaContent]="pizzaContent" ></dc-pizza>
</mat-tab>
<mat-tab label="burger">
<dc-burger [burgerContent]="burgerContent"></dc-burger>
</mat-tab>
</mat-tab-group>
PizzaComponent的代码:
@Component({
selector: 'dc-pizza',
templateUrl: './dc-pizza.component.html',
styleUrls: ['./dc-pizza.component.scss']
})
export class PizzaComponent implements OnInit, OnChanges {
@Input() pizzaContent: any;
ngOnChanges() {
this.myfood= JSON.parse(JSON.stringify(this.pizzaContent));
}
}
BurgerComponent的代码:
@Component({
selector: 'dc-burger',
templateUrl: './dc-burger.component.html',
styleUrls: ['./dc-burger.component.scss']
})
export class BurgerComponent implements OnInit, OnChanges {
@Input() burgerContent: any;
ngOnChanges() {
this.myfood= JSON.parse(JSON.stringify(this.burgerContent));
}
}
现在发生的事情是每当我打开选项卡时,都会触发这两个ngOnchanges事件,并且burgercontent的值都将解析为两个myfood。但是我希望myfood用相应的值填充。
我可以在这方面获得帮助吗