ngOnChanges在标签之间交换数据

时间:2018-09-07 08:35:40

标签: angular typescript

在一个称为“ 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用相应的值填充。

我可以在这方面获得帮助吗

0 个答案:

没有答案