Eine kurze Diskussion über die Kommunikation zwischen übergeordneten und untergeordneten Angular-Komponenten

Dieser Artikel führt Sie zum Verständnis der Komponentenkommunikation in Angular und stellt die Methoden der Kommunikation zwischen übergeordneten Komponenten und untergeordneten Komponenten sowie der Kommunikation zwischen untergeordneten Komponenten und übergeordneten Komponenten vor. Ich hoffe, dass er für alle hilfreich ist!

Komponentenkommunikation

Die Komponente ist völlig unabhängig, daher werden die Daten untereinander nicht gemeinsam genutzt. Wenn Sie Daten zwischen Komponenten teilen möchten, müssen Sie die Kommunikation zwischen Komponenten implementieren. [Empfohlene verwandte Tutorials: „angular Tutorial“]

Kommunikation zwischen Komponenten

• Übergeordnete Komponente kommuniziert mit untergeordneter Komponente

• untergeordnete Komponente kommuniziert mit übergeordneter Komponente

ng6 Um eine komponentenübergreifende Kommunikation zu erreichen Kommunikation, es bietet Durchsatz: Eingabe, Ausgabe

Die übergeordnete Komponente kommuniziert mit der untergeordneten Komponente

ng6 wird basierend auf ts implementiert, daher müssen die Kommunikationsdaten den Typ definieren (die interne Struktur verstehen, Speicherplatz zuweisen).

Die übergeordnete Komponente kommuniziert mit der untergeordneten Komponente, die Unterkomponente ist der Empfänger. Verwenden Sie daher den Eingabedurchsatz

, um die Kommunikation von der übergeordneten Komponente zur Unterkomponente in 6 Schritten zu implementieren

Der erste Schritt Übergeben Sie in der übergeordneten Komponentenvorlage Daten an die Unterkomponente. Wenn die Daten dynamisch sind, können Sie sie mit [] syntaktischem Zucker ändern. Schritt 2: Definieren Sie die Datenmodellklasse (wenn die Daten sehr einfach sind). , Sie können diesen Schritt weglassen)

Sie können auch die ng-Direktive verwenden, um die Modellklasse zu definieren

ng class 类名

In der Unterkomponente die Modellklasse einführen

Schritt 4 In der Unterkomponente den Durchsatz einführen Eingabe: Fünf Schritte: Es gibt zwei Möglichkeiten, Daten über das Durchsatzgerät zu empfangen Metainformationen der Komponenteneingaben erhalten

In der Annotationsklasse: Eingaben: [Attribute data]

In der Komponente: Attribute data: Model class;

Daten verwenden: Da die Daten der Komponente selbst hinzugefügt werden, können sie sowohl in der Komponente als auch in der Vorlage verwendet werden.

• Beispiel:

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

  Nach dem Login kopieren

Die untergeordnete Komponente kommuniziert mit der übergeordneten Komponente Die untergeordnete Komponente kommuniziert mit der implementierten übergeordneten Komponente basierend auf benutzerdefinierten Ereignissen. Bei untergeordneten Komponenten ist es der Herausgeber. Verwenden Sie daher den Ausgabedurchsatz

• , um die Kommunikation der untergeordneten Komponente mit der übergeordneten Komponente in sechs Schritten zu implementieren

[属性数据]

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

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

举例：

// 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()Der erste Schritt

Zum Beispiel (demo)="dealDemo($event)"

Der zweite Schritt

Schritt 3

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

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion über die Kommunikation zwischen übergeordneten und untergeordneten Angular-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!