angular中不同的组件间传值与通信的方法_angular中的组件传值

angular

200 浏览量更新于2023-03-03 评论收藏 56KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

angular中不同的组件间传值与通信的方法中不同的组件间传值与通信的方法

本文主要介绍angular在不同的组件中如何进行传值，如何通讯。主要分为父子组件和非父子组件部分。

父子组件间参数与通讯方法父子组件间参数与通讯方法

使用事件通信（使用事件通信（EventEmitter，，@Output）：）：

场景：可以在父子组件之间进行通信，一般使用在子组件传递消息给父组件；

步骤：

子组件创建事件EventEmitter对象，使用@output公开出去；

父组件监听子组件@output出来的方法，然后处理事件。

代码：

// child 组件

@Component({

selector: 'app-child',

styles: [``] })

export class AppChildComponent implements OnInit {

@Output() onVoted: EventEmitter<any> = new EventEmitter();

ngOnInit(): void {

this.onVoted.emit(1);

}

// parent 组件

@Component({

selector: 'app-parent',

<app-child (onVoted)="onListen($event)"></app-child>

styles: [``] })

export class AppParentComponent implements OnInit {

ngOnInit(): void {

throw new Error('Method not implemented.');

}

onListen(data: any): void {

console.log('TAG' + '---------->>>' + data);

}

使用使用@ViewChild和和@ViewChildren：：

场景：一般用于父组件给子组件传递信息，或者父组件调用子组件的方法；

步骤：

父组件里面使用子组件;

父组件里面使用@ViewChild获得子组件对象。

父组件使用子组件对象操控子组件；（传递信息或者调用方法）。

代码：

// 子组件

@Component({

selector: 'app-child',

styles: [``] })

export class AppChildComponent2 implements OnInit {

data = 1;

ngOnInit(): void {

}

getData(): void {

console.log('TAG' + '---------->>>' + 111);

}

// 父组件

@Component({

selector: 'app-parent2',

<app-child></app-child>

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38606300

粉丝: 4
资源: 829

会员权益专享

angular中不同的组件间传值与通信的方法

评论0

会员权益专享

最新资源

angular中不同的组件间传值与通信的方法

评论0

Angular父子组件以及非父子组件之间的通讯.pdf

详解Angular2组件之间如何通信

Angular事件之不同组件间传递数据的方法

angular组件间的父子传值

angular子组件给父组件传值

angular子组件个父组件传值

angular如何组件传值

Angular.js组件通信缺点

angular父组件给子组件传值，值不发生改变，ngOnchanges无法监听到

Angular9 父组件调用子组件方法

angular 父组件调用子组件中的私有的方法

angular在父组件上触发子组件方法

angular 父组件调用子组件中的方法

angular调用其他组件的方法

angular在父组件上触发孙组件方法

angular组件和Vue组件

angular怎么销毁组件

angular 将子组件的值和方法传递给父组件

angular父组件调用子组件方法

angular在父组件上触发子组件方法并获取到返回的值

会员权益专享

最新资源