您的位置是:网站首页>Javascript编程Javascript编程

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

少儿编程网2022-01-21 15:28:09Javascript编程 人已围观 来源:少儿编程 -用户投稿

简介本篇文章带大家了解一下Angular中的组件通信,介绍一下父组件向子组件通信、子组件向父组件通信的方法,希望对大家有所帮助!组件通信组件是一个完整独立的,因此彼此之间的数据不会共享,想在组件之间共享数据,就要实现组件间的通信。【相关教程推荐:《angular教程》】组件间通信父组件向子组件通信子组件

本篇文章带大家了解一下Angular中的组件通信,介绍一下父组件向子组件通信、子组件向父组件通信的方法,希望对大家有所帮助!nil少儿编程网-https://www.pxcodes.com

nil少儿编程网-https://www.pxcodes.com

组件通信

组件是一个完整独立的,因此彼此之间的数据不会共享,想在组件之间共享数据,就要实现组件间的通信。【相关教程推荐:《angular教程》】nil少儿编程网-https://www.pxcodes.com

组件间通信nil少儿编程网-https://www.pxcodes.com

  • 父组件向子组件通信nil少儿编程网-https://www.pxcodes.com

  • 子组件向父组件通信nil少儿编程网-https://www.pxcodes.com

ng6为了实现组件间通信,提供了吞吐器:Input,Outputnil少儿编程网-https://www.pxcodes.com

父组件向子组件通信nil少儿编程网-https://www.pxcodes.com

ng6基于ts实现,因此通信的数据要定义类型(了解内部的结构,分配内存空间)nil少儿编程网-https://www.pxcodes.com

父组件向子组件通信,子组件是接收方,因此要使用Input吞吐器nil少儿编程网-https://www.pxcodes.com

实现父组件向子组件通信分成6步nil少儿编程网-https://www.pxcodes.com

第一步 父组件模板中,为子组件传递数据,如果数据是动态可变的,可以使用[]语法糖nil少儿编程网-https://www.pxcodes.com

第二步 定义数据模型类(如果数据非常简单,可以省略该步)nil少儿编程网-https://www.pxcodes.com

定义模型类也可以使用ng指令nil少儿编程网-https://www.pxcodes.com

ng class 类名

模型类的命名规范:我们可以定义成.model.ts文件。也可以将文件直接放在models目录下,并定义成.ts文件nil少儿编程网-https://www.pxcodes.com

第三步 子组件中,引入模型类nil少儿编程网-https://www.pxcodes.com

第四步 子组件中,引入吞吐器Inputnil少儿编程网-https://www.pxcodes.com

第五步 通过吞吐器,接收数据,有两种方式nil少儿编程网-https://www.pxcodes.com

  • 第一种 通过Input吞吐器注解类的方式,接收数据nil少儿编程网-https://www.pxcodes.com

@Input() 数据名称: 模型类;
  • 第二种 还可以通过组件的注解元信息inputs接收nil少儿编程网-https://www.pxcodes.com

注解类中:inputs: [属性数据]nil少儿编程网-https://www.pxcodes.com

组件中:属性数据: 模型类;nil少儿编程网-https://www.pxcodes.com

第六步 使用数据,由于数据被添加给组件自身了,因此不论是在组件中,还是在模板中都可以使用nil少儿编程网-https://www.pxcodes.com

举例:nil少儿编程网-https://www.pxcodes.com

// 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() {
    }
}

子组件向父组件通信nil少儿编程网-https://www.pxcodes.com

子组件向父组件通信是基于自定义事件实现的。对于子组件来说,是发布方,因此要使用Ouput吞吐器nil少儿编程网-https://www.pxcodes.com

实现子组件向父组件通信分成六步nil少儿编程网-https://www.pxcodes.com

第一步 在父组件模板中,模拟DOM事件,为子组件元素绑定父组件的方法,使用()语法糖nil少儿编程网-https://www.pxcodes.com

例如 (demo)="dealDemo($event)"nil少儿编程网-https://www.pxcodes.com

为了传递数据,要添加$eventnil少儿编程网-https://www.pxcodes.com

第二步 在子组件中,引入吞吐器 Outputnil少儿编程网-https://www.pxcodes.com

第三步 在子组件中,引入EventEmitter事件模块nil少儿编程网-https://www.pxcodes.com

第四步 为子组件创建事件对象,有两种方式nil少儿编程网-https://www.pxcodes.com

  • 第一种 通过Output吞吐器注册nil少儿编程网-https://www.pxcodes.com

@Output() 属性名称 = new EventEmitter()
  • 第二种 还可以通过注解的元信息outputs接收nil少儿编程网-https://www.pxcodes.com

在注解中,注册属性 outputs: [属性名称]nil少儿编程网-https://www.pxcodes.com

组件中,创建事件对象 属性名称 = new EventEmitter()nil少儿编程网-https://www.pxcodes.com

第五步 子组件中,通过事件对象的emit方法发布消息,参数就是传递的数据nil少儿编程网-https://www.pxcodes.com

第六步 在父组件中,通过父组件方法,接收子组件传递的数据nil少儿编程网-https://www.pxcodes.com

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父子组件间怎么进行通信的详细内容,更多请关注少儿编程网其它相关文章!nil少儿编程网-https://www.pxcodes.com

来源:php中文网nil少儿编程网-https://www.pxcodes.com


相关文章:

支持一下 ( )

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

      匿名评论
    • 评论
    人参与,条评论
    浅谈Angular父子组件间怎么进行通信

微信公众号

免费视频教程

先知道