繁体   English   中英

从父按钮操作事件访问子变量值

Access child variable value from a parent button action event

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我们可以通过单击父按钮访问子变量值吗? 子组件

@Component({
  selector: 'app-child-panel',
  templateUrl: './child-panel.component.html',
  styleUrls: ['./child-panel.component.scss'],
})
export class childComponent implements OnInit {
  
  selectedItems: any = [];
  constructor() {
  }

  ngOnInit(): void {
    this.data= {};
  }
  updateData(): void{
    this.data ={item:[]}
  }
}

父组件

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.scss'],
})
export class ParentComponent {
  childComponent: ChildComponent | undefined;
  constructor() {}

  onClick(): void {
 
  }

}

是否可以在父onClick方法中访问子数据object。

有人提供解决方案将不胜感激。

提前致谢

2 个回复

您可能应该看看https://angular.io/guide/inputs-outputs#sending-data-to-a-parent-component

go 的方法是在子组件中定义一个 EventEmitter:

Output()
dataChanged = new EventEmitter();

...
updateData(): void{
  this.data ={item:[]}
  this.dataChanged.emit(data);    
}

然后 amd 相应地处理父组件中的事件(在 Typescript 中定义变量):

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.scss'],
})
export class ParentComponent {
  childProp;
  constructor() {}

  onClick(): void {
    // now you can use this.childProp here
  }

}
<app-child-panel (dataChange)="childProp = $event">

你有一些选择:

1 - 您可以按照其他答案的建议使用@Input @Output。

2 - 您可以使用ViewChild属性装饰器将子组件作为父组件中的属性访问,如下所示:

在父

@ViewChild('child', { static: false })
childComponent: ChildComponent;
 
onClick(){
  console.log(childComponent.childProp)
  //make sure the prop is public
}

在父模板中

<app-child-panel #child></app-child-panel>

3 - 您可以使用服务在组件之间进行通信,请查看以下问题: https://stackoverflow.com/a/51027980/2025458

如果您认为您将不得不在不止一位父母和一位孩子之间分享日期,则服务可能是一种方式

1 继承变量,从父变量访问子变量值

我试图做一个超类来访问SQLite数据库(在Android中)中的DataModels。 我想在子级中更改变量值,但在父级中使用它。 这是超类代码的一部分: 子班: 我对表变量有一些问题:它为null。 添加更多奇怪的行为的是,该过程甚至会输入if语句,即使var为nu ...

3 Flutter - 如何访问父事件或动作的子数据

我有一个较长的输入表单,用户可以在其中添加许多相同的子表单。 例如,考虑一个父母可以输入他们的数据(父母表格)然后添加他们的孩子的表格。 由于我不知道用户有多少个孩子,他们可以使用按钮动态添加更多子表单。 对于每个孩子,请求的数据都是相同的,例如姓名、生日、性别,实际上大约有 10 个字段。 所 ...

4 从父反应访问子变量

我有Parent和子女组成部分Map在地图。 我正在为Map内部的leafMap变量分配leaflet.js,并且可以从Map内部调用leafMap方法。 但是,如何从Parent调用“ map”方法呢? ...

5 从父模板中的包含访问子变量

我试图在子模板中指定一个变量,并从父模板中包含的另一个模板访问它。 这是我正在尝试做的(将代码修整到最低限度): child.html base.html bar.html 至此,我渲染了child.html文件,但没有任何输出。 这是我尝试过的: ...

2014-11-03 20:21:02 1 862   jinja2
6 从子组件模板访问父变量

我有两个类, Secure和Client 。 我的Secure类是Client的父类。 想法是,当类扩展Secure ,构造函数将检查身份验证,如果用户未通过身份验证,则会重定向到登录页面。 该类如下所示: 我的孩子班级看起来像这样: 在我的Clients模板中,我想检 ...

2017-06-03 16:19:53 2 1887   angular
8 从子angular2中的父级访问变量

我在父组件中有一个变量,我想在子组件中进行编辑。 我尝试了@Input但似乎没有用! 如何实现将var传递给孩子并听取更改? 家长: export class Parent implements OnInit { showModal : boolean = false; } ...

2017-01-28 13:46:31 1 2676   angular
10 如何从子级访问父变量

我正在尝试从B访问A中的变量(在下面的示例中)。 我没有从A扩展B,因为A只是一个容器。 如何从Item访问Parent ? ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM