Angular父子组件传值及方法调用

本文介绍Angular中父子组件间的数据传递及方法调用方式。包括子组件如何接收父组件的数据及调用其方法,如使用Input装饰器及直接传递父组件实例;父组件如何接收子组件的数据及调用其方法,如使用ViewChild、DOM操作及EventEmitter。

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

Angular 父子组件传值及方法调用

1.子组件接收父组件的数据及调用父组件的方法

方法1:通过Input接收父组件的数据或方法
(1)在子组件中导入Input:
import { Input } from ‘@angular/core’;
(2)子组件类中通过@Input装饰器接受输入数据或方法,并赋值给子组件的属性
(3)子组件引用是通过属性传值,属性名要和组件类中的属性名一致
(4)通过步骤(2)中的属性,即可获得父组件传递的数据或通过属性名+()即可调用父组件的方法

方法2:通过Input接收父组件,直接调用父组件的属性及方法
这个方法和方法1类似,区别是:在引用子组件是,把父组件通过"this"关键字整个传递给子组件,在子组件中就可以直接调用父组件的属性和方法。

2.父组件接收子组件的数据及调用子组件的方法

方法1:通过ViewChild获取子组件,直接调用子组件的数据及方法
(1)子组件引用是给子组件新增ID属性:#idName
(2)父组件类中引入ViewChild:import { ViewChild } from ‘@angular/core’;
(3)父组件勒种通过@ViewChild(‘idName’)装饰器接受子组件并赋值给自己的属性
(4)通过(3)中获取的属性获取子组件的数据或调用子组件的方法

方法2:dom加载完成后,通过document.elementById获取子组件,获取子组件的数据、调用子组件的方法
(1)父组件类需要在ngAfterViewInit()方法中,通过document.getElementById(‘idName’)获取子组件
(2)调用子组件的属性和方法

方法3:子组件通过EventEmitter发射数据,父组件通过()和$event接收子组件发射的数据

(1)子组件中导入EventEmitter、Output:import { EventEmitter ,Output } from ‘@angular/core’;
(2)子组件中定义属性为输出类型,并设置为EventEmitter类型:@Output() private out = new EventEmitter();
(3)输出属性通过emit()方法发射数据:this.out.emit(‘msg’);
(4)子组件调用中接收子组件发射的数据,并传递通过$event传递给父组件的方法:(out)=“fatherMethod($event)”

示例代码: 代码

Angular 中,组件之间递数据可以通过输入属性(@Input)、输出属性(@Output)和服务(Service)来实现。 1. 输入属性(@Input) 在父组件中通过属性绑定的方式将数据递给子组件子组件通过 @Input 装饰器来接收数据。 父组件: ```html <app-child [message]="parentMessage"></app-child> ``` ```typescript export class ParentComponent { parentMessage = 'Message from parent'; } ``` 子组件: ```typescript import { Component, Input } from '@angular/core'; @Component({ selector: 'app-child', template: '<p>{{ message }}</p>' }) export class ChildComponent { @Input() message: string; } ``` 2. 输出属性(@Output) 在子组件中通过 EventEmitter 发出事件,父组件通过事件绑定的方式来接收数据。 子组件: ```typescript import { Component, EventEmitter, Output } from '@angular/core'; @Component({ selector: 'app-child', template: '<button (click)="sendMessage()">Send Message</button>' }) export class ChildComponent { @Output() messageEvent = new EventEmitter<string>(); sendMessage() { this.messageEvent.emit('Message from child'); } } ``` 父组件: ```html <app-child (messageEvent)="receiveMessage($event)"></app-child> ``` ```typescript export class ParentComponent { receiveMessage(message: string) { console.log(message); } } ``` 3. 服务(Service) 通过服务来实现组件之间的数据递,可以在服务中定义一个公共的数据变量,然后在需要访问该数据的组件中注入该服务。 服务: ```typescript import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class DataService { message = 'Message from service'; } ``` 组件: ```typescript import { Component } from '@angular/core'; import { DataService } from './data.service'; @Component({ selector: 'app-child', template: '<p>{{ message }}</p>' }) export class ChildComponent { message: string; constructor(private dataService: DataService) { } ngOnInit() { this.message = this.dataService.message; } } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值