Angular父组件获取子组件里的数据和方法

最新推荐文章于 2025-06-15 11:36:03 发布

路不在自己脚下

最新推荐文章于 2025-06-15 11:36:03 发布

阅读量6.1k

点赞数 1

CC 4.0 BY-SA版权

文章标签： angular

本文链接：https://blog.youkuaiyun.com/qq_43579525/article/details/83961341

本文详细介绍如何在Angular中实现父组件通过局部变量获取子组件的引用，主动调用子组件的方法和获取子组件的数据。通过具体步骤和代码示例，帮助读者理解并掌握这一核心概念。

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

（父组件通过局部变量获取子组件的引用，主动获取子组件的方法）

1.在子组件里cart.component.ts里定义一个方法：

cartRun () {
	alert("这是购物车子组件里的方法")
}

2.在父组件produc.component.html里的子组件标签定义一个引用名字cart(让父组件识别调用)

<div class="parent">
	<button ></button>
	<app-cart  #cart></app-cart>
</div>

3.在父组件produc.component.html通过子组件定义的引用#cart来调用子组件cart.component.ts里的cartRun()方法

<div class="parent">
	<button  (click)="cart.cartRun()"></button>
	<app-cart #cart></app-cart>
</div>

（父组件通过局部变量获取子组件的引用，主动获取子组件里的数据）

1.父组件produc.component.ts里引入ViewChild

 import { Component, OnInit, ViewChild } from '@angular/core';

2.在父组件produc.component.html里的子组件标签定义一个引用名字#cart(让父组件识别调用)

<div class="parent">
	<button ></button>
	<app-cart  #cart></app-cart>
</div>

3.在父组件 produc.component.ts里通过@ViewChild()指定引用

export class NewComponent implements OnInit {
		//括号里的"cart"就是<app-cart  #cart></app-cart>里的#cart（一定要相同）,另一个cart是指定类型
	 @ViewChild("cart") cart;
}

4.在父组件produc.component.ts里定义getChildData()方法，并调用子组件cart.component.ts里的数据: public childData = “childData:父组件获取子组件的数据”;

getChildData(){
	// 获取子组件里的数据：public childData = "childData:父组件获取子组件的数据";
	//cart是上面 @ViewChild("cart") cart;里的cart,通过 this.cart.childData获取子组件里的数据
	 //alert(this.cart.childData)
	 //父组件里声明一个变量来接收数据
     this.fromChildData = this.cart.childData
     //console.log(this.fromChildData)
}

5.在父组件produc.component.html里

 <p>
    <button (click)='getChildData()'>
           父组件调用自己的方法获取子组件里的数据
    </button>
	
 </p>