Angular 상위 구성 요소와 하위 구성 요소 간의 통신 방법에 대한 간략한 설명

이 글은 Angular의 컴포넌트 통신을 이해하고, 부모 컴포넌트가 자식 컴포넌트와 통신하는 방법, 자식 컴포넌트가 부모 컴포넌트와 통신하는 방법을 소개합니다. 모두에게 도움이 되기를 바랍니다.

컴포넌트 통신

컴포넌트는 완전하고 독립적인 컴포넌트이므로 서로 간의 데이터가 공유되지 않습니다. 컴포넌트 간 데이터를 공유하려면 컴포넌트 간 통신을 구현해야 합니다. [관련 튜토리얼 권장 사항: "angular 튜토리얼"]

컴포넌트 간의 통신

• 상위 컴포넌트는 하위 컴포넌트와 통신

• 하위 컴포넌트는 상위 컴포넌트와 통신

ng6 처리량 제공: 입력, 출력

상위 컴포넌트는 하위 컴포넌트와 통신합니다

ng6는 ts 기반으로 구현되므로 통신 데이터는 유형을 정의해야 합니다(내부 구조 이해, 메모리 공간 할당)

상위 구성 요소는 하위 구성 요소와 통신하고 하위 구성 요소는 수신자이므로 입력 처리량

을 사용하여 상위 구성 요소에서 하위 구성 요소로의 통신을 6단계로 구현합니다.

첫 번째 단계 상위 구성 요소 템플릿, 데이터를 하위 구성 요소에 전달할 수 있습니다. 변경하려면 [] 구문 설탕을 사용할 수 있습니다

2단계 데이터 모델 클래스를 정의합니다(데이터가 매우 간단한 경우 이 단계는 생략 가능)

ng 지시문을 사용하여 모델 클래스를 정의할 수도 있습니다

ng class 类名

모델 클래스 명명 규칙: .model.ts 파일로 정의할 수 있습니다. 파일을 모델 디렉터리에 직접 배치하고 .ts 파일로 정의할 수도 있습니다

3단계 하위 구성 요소에서 모델 클래스를 소개합니다

4단계 하위 구성 요소에서 처리량을 소개합니다. 입력

5단계 처리 장치를 통해 데이터를 수신하는 방법은 두 가지가 있습니다

• 첫 번째 방법은 입력 처리량 주석 클래스를 통해 데이터를 수신하는 것입니다

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

• 두 번째 방법은 주석을 사용하는 것입니다. 구성 요소 입력의 메타 정보는

주석 클래스에서: 입력: [속성 데이터][属性数据]

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

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

举例：

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

구성 요소에서: 속성 데이터: 모델 클래스;

6단계

데이터 사용, 데이터는 구성 요소 자체에 추가되므로 구성 요소 또는 템플릿에서 사용할 수 있습니다.

예:

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'
        })
    }
}

하위 구성 요소는 상위 구성 요소와 통신합니다

🎜 🎜하위 구성 요소는 사용자 정의 이벤트를 기반으로 구현된 상위 구성 요소와 통신합니다. 하위 구성 요소의 경우 게시자이므로 출력 처리량 🎜🎜🎜을 사용하여 6단계로 상위 구성 요소에 대한 하위 구성 요소 통신을 구현합니다. 🎜🎜🎜🎜첫 번째 단계🎜 상위 구성 요소 템플릿에서 하위 구성 요소에 대한 DOM 이벤트를 시뮬레이션합니다. 요소를 상위 구성 요소에 바인딩하려면 () 구문 sugar🎜🎜를 사용하세요. 예를 들어 (demo)="dealDemo($event)"🎜🎜데이터를 전달하려면 $event🎜🎜🎜두 번째 단계🎜를 하위 항목에 추가하세요. 컴포넌트, 처리량 출력 소개🎜🎜🎜세 번째 단계🎜 하위 컴포넌트에서 EventEmitter 이벤트 모듈을 소개합니다🎜🎜🎜네 번째 단계🎜 하위 컴포넌트에 대한 이벤트 객체를 생성하는 방법에는 두 가지가 있습니다🎜🎜🎜🎜첫 번째 출력 처리량을 통해 등록됩니다🎜 🎜🎜rrreee🎜🎜🎜두 번째 유형은 주석의 메타 정보 출력을 통해 수신될 수도 있습니다🎜🎜🎜🎜주석에서 속성 출력을 등록합니다: [속성 이름]🎜🎜컴포넌트에서 이벤트 객체를 생성합니다속성 이름 = new EventEmitter()🎜🎜🎜5단계🎜 하위 컴포넌트에서 이벤트 객체의 내보내기 메소드를 통해 메시지를 게시하고, 매개변수는 전달된 데이터입니다🎜🎜🎜6단계🎜 부모 컴포넌트에서 부모 컴포넌트 메서드를 통해 자식 컴포넌트가 전달한 데이터를 받습니다🎜rrreee🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 입문🎜을 방문하세요! ! 🎜

위 내용은 Angular 상위 구성 요소와 하위 구성 요소 간의 통신 방법에 대한 간략한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!