Angular 父子组件传值并保持实时刷新

魔仙佩奇

于 2021-04-27 18:35:57 发布

阅读量1.4k

点赞数

本文链接：https://blog.youkuaiyun.com/qq_39478684/article/details/116207342

版权

本文探讨了在Angular框架中如何实现父子组件间的值传递，并确保数据的实时刷新。通过示例展示了在父组件和子组件中设置和更新值的方法，实现了双向数据绑定的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父组件中：

<app-menu
 	#appMenu
 	[data]="matMenuData"
 	(selectedName)="activeSideBarItem($event)"
 ></app-menu>
 <button type="button" (click)="myNewFile()">new</button>

myNewFile(){
        var temp = this.matMenuData;
        this.matMenuData = []; //重新给变量赋值
        this.matMenuData.forEach(menu => {
            if(menu.name == "common"){
                menu.children.push({
                    name: "test",
                    id: "test",
                    
                })
            }
            
            
        })
        this.matMenuData = [...temp];
        
    }
activeSideBarItem(event) {
	console.log(event) 
    }

子组件中：

@Input() public data: any[] ;
@Output() public selectedName = new EventEmitter();

selected(name) {
    this.selectedName.emit(name);
}

<button mat-button (click)="selected"> {{node.name}} </button>