浅谈Angular父子组件间怎么进行通信

@H_777_3@

组件通信

组件是一个完整独立的，因此彼此之间的数据不会共享，想在组件之间共享数据，就要实现组件间的通信。【相关教程推荐：《angular教程》】

组件间通信

• 父组件向子组件通信

• 子组件向父组件通信

ng6为了实现组件间通信，提供了吞吐器：Input，Output

父组件向子组件通信

ng6基于ts实现，因此通信的数据要定义类型（了解内部的结构，分配内存空间）

父组件向子组件通信，子组件是接收方，因此要使用Input吞吐器

实现父组件向子组件通信分成6步

第一步 父组件模板中，为子组件传递数据，如果数据是动态可变的，可以使用[]语法糖

第二步 定义数据模型类（如果数据非常简单，可以省略该步）

定义模型类也可以使用ng指令

ng class 类名

模型类的命名规范：我们可以定义成.model.ts文件。也可以将文件直接放在models目录下，并定义成.ts文件

第三步 子组件中，引入模型类

第四步 子组件中，引入吞吐器Input

第五步 通过吞吐器，接收数据，有两种方式

• 第一种 通过Input吞吐器注解类的方式，接收数据

@Input() 数据名称: 模型类;
    

• 第二种 还可以通过组件的注解元信息inputs接收

注解类中：inputs: [属性数据]

组件中：属性数据: 模型类;

第六步 使用数据，由于数据被添加给组件自身了，因此不论是在组件中，还是在模板中都可以使用

举例：

// 4 引入吞吐器import {
 component, OnInIT, Input }
     From '@angular/core';
// 3 引入模型类import {
 Data }
     from '../../models/data';
@Component({
    selector: 'app-inputs',    templateUrl: './inputs.COMponent.htML',    styleUrls: ['./inputs.component.css'],    // 5 通过元信息接收    inputs: ['color', 'data']}
)export class InputsComponent implements OnInit {
        // 5 接收数据    // @Input() data: Data;
        // @Input() color: string;
        // 声明类型    data: Data;
        color: string;
    constructor() {
        // 6 组件中使用        console.LOG(this)    }
    ngOnInit() {
    }
}
    

子组件向父组件通信

子组件向父组件通信是基于自定义事件实现的。对于子组件来说，是发布方，因此要使用Ouput吞吐器

实现子组件向父组件通信分成六步

第一步 在父组件模板中，模拟DOM事件，为子组件元素绑定父组件的方法，使用()语法糖

例如 (demo)="dealDemo($event)"

为了传递数据，要添加$event

第二步 在子组件中，引入吞吐器 Output

第三步 在子组件中，引入EventEmitter事件模块

第四步 为子组件创建事件对象，有两种方式

• 第一种 通过Output吞吐器注册

@Output() 属性名称 = new EventEmitter()

• 第二种 还可以通过注解的元信息outputs接收

在注解中，注册属性 outputs: [属性名称]

组件中，创建事件对象 属性名称 = new EventEmitter()

第五步 子组件中，通过事件对象的emit方法发布消息，参数就是传递的数据

第六步 在父组件中，通过父组件方法，接收子组件传递的数据

import {
 Component, OnInit, Output, EventEmitter }
     from '@angular/core';
@Component({
    selector: 'app-outputs',    templateUrl: './outputs.component.html',    styleUrls: ['./outputs.component.css'],    // 元信息注册事件对象    outputs: ['sendMessage']}
)export class OutputsComponent implements OnInit {
        // 4 注册事件对象    // @Output() sendMessage = new EventEmitter();
        // 实例化    sendMessage = new EventEmitter();
    constructor() {
 }
    ngOnInit() {
    }
    // 事件回调函数    demo() {
        // console.log(111, this)        // 5 点击按钮的时候，向父组件发布消息        this.sendMessage.emit({
            msg: 'hello菜鸟',            color: 'red'        }
)    }
}
    

更多编程相关知识，请访问：编程入门！！

以上就是浅谈Angular父子组件间怎么进行通信的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！