Une brève discussion sur la façon de communiquer entre les composants angulaires parent et enfant

Cet article vous amènera à comprendre la communication des composants dans Angular et à présenter les méthodes de communication des composants parents avec les composants enfants et les composants enfants communiquant avec les composants parents. J'espère que cela sera utile à tout le monde !

Communication des composants

Le composant est complètement indépendant, donc les données entre eux ne seront pas partagées. Si vous souhaitez partager des données entre les composants, vous devez mettre en œuvre une communication entre les composants. [Tutoriels associés recommandés : "Tutoriel angulaire"]

Communication inter-composants

• Le composant parent communique avec le composant enfant

• Le composant enfant communique avec le composant parent

ng6 Afin de réaliser l'inter-composant communication, il fournit Débit : Entrée, Sortie

Le composant parent communique avec le composant enfant

ng6 est implémenté sur la base de ts, les données de communication doivent donc définir le type (comprendre la structure interne, allouer de l'espace mémoire)

Le composant parent communique avec le composant enfant, le sous-composant est le récepteur, utilisez donc le débit d'entrée

pour mettre en œuvre la communication du composant parent vers le sous-composant en 6 étapes

La première étape Dans le modèle du composant parent, transmettez les données au sous-composant. Si les données sont dynamiques, elles peuvent être modifiées. Pour les modifier, vous pouvez utiliser [] sucre syntaxique

Étape 2 Définissez la classe du modèle de données (si les données sont très simples). , vous pouvez omettre cette étape)

Vous pouvez également utiliser la directive ng pour définir la classe modèle

ng class 类名

Convention de dénomination pour les classes modèles : Nous pouvons la définir comme un fichier .model.ts. Vous pouvez également placer le fichier directement dans le répertoire models et le définir comme fichier .ts

Étape 3 Dans le sous-composant, introduisez la classe model

Étape 4 Dans le sous-composant, introduisez le débit Entrée

Cinq étapes Il existe deux façons de recevoir des données via le périphérique de débit

• La première façon consiste à recevoir des données via la classe d'annotation de débit d'entrée

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

• La deuxième façon consiste à utiliser l'annotation les méta-informations des entrées du composant reçoivent

Dans la classe d'annotation : entrées : [Données d'attribut][属性数据]

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

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

举例：

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

Dans le composant : Données d'attribut : Classe de modèle ;

Étape 6

Utiliser les données , puisque les données sont ajoutées au composant lui-même, elles peuvent être utilisées que ce soit dans le composant ou dans le modèle

Par exemple :

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

Le composant enfant communique avec le composant parent

🎜 🎜Le composant enfant communique avec le composant parent Implémenté en fonction d'événements personnalisés. Pour les composants enfants, c'est l'éditeur, utilisez donc le débit Ouput 🎜🎜🎜 pour implémenter la communication du composant enfant avec le composant parent en six étapes 🎜🎜🎜🎜La première étape🎜 Dans le modèle du composant parent, simulez les événements DOM pour le composant enfant Pour lier un élément à un composant parent, utilisez la syntaxe sugar ()🎜🎜Par exemple (demo)="dealDemo($event)"🎜🎜Afin de transmettre des données, ajoutez $event🎜🎜🎜La deuxième étape🎜Dans l'enfant composant, introduisez Throughput Output🎜🎜🎜La troisième étape🎜 Dans le sous-composant, introduisez le module d'événement EventEmitter🎜🎜🎜La quatrième étape🎜 Il existe deux façons de créer des objets d'événement pour le sous-composant🎜🎜🎜🎜La première est enregistré via l'ordinateur de sortie🎜 🎜🎜rrreee🎜🎜🎜Le deuxième type peut également être reçu via les sorties de méta-informations de l'annotation🎜🎜🎜🎜Dans l'annotation, enregistrez les sorties d'attribut : [Nom de l'attribut]🎜🎜Dans le composant, créez l'objet événementNom de l'attribut = new EventEmitter()🎜🎜🎜Étape 5🎜 Dans le composant enfant, publiez le message via la méthode d'émission de l'objet événement, et le paramètre correspond aux données transmises🎜🎜🎜Étape 6🎜 Dans le composant parent, recevez les données transmises par le composant enfant via la méthode du composant parent🎜rrreee🎜Pour plus de connaissances liées à la programmation, veuillez visiter : 🎜Introduction à la programmation🎜 ! ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!