Une brève discussion sur la méthode de transmission des paramètres entre les composants parent et enfant dans Angular

Cet article vous présentera la méthode de transmission des paramètres entre les composants parent et enfant dans Angular. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Recommandations associées : "Tutoriel angulaire"

1 : Le composant parent obtient les données et les méthodes des composants enfants

C'est-à-dire que le composant enfant transmet des données et des méthodes au composant parent

via ViewChild

Exemple de démonstration :

Composant parent：news

Sous-composant : en-tête

Si l'en-tête du sous-composant a une méthode d'exécution

run(){
 console.log(‘我是header里面的run方法’);
 }

Appelez la méthode d'exécution du sous -en-tête de composant dans le composant parent

1. Appelez le composant enfant dans le composant parent et définissez un nom pour le composant enfant

<app-header #header></app-header>

2. ViewChild

import { Component,OnInit ,ViewChild} from ‘@angular/core’;

< dans le composant parent 🎜>3. Utilisez le décorateur d'attribut ViewChild pour l'associer au sous-composant tout à l'heure

@ViewChild(‘header’)
Header:any;

4. -component

getChildRun(){
this.Header.run();
}

Deux : le composant parent transmet la valeur au composant enfant - @input

Exemple de démonstration :

Composant parent : home
Composant enfant : en-tête

Le composant parent peut non seulement transmettre une valeur au composant enfant Transmettre des données simples, et vous pouvez également transmettre vos propres méthodes et l'intégralité du composant parent au composant enfant

Donc la méthode du composant parent peut être appelée dans le composant enfant

1. Le composant parent appelle la méthode du composant enfant Lors de la transmission des données

<app-header [title]="title" [homeWork]="homeWork"  [homepage]=&#39;this&#39;></app-header>

2 . Le sous-composant introduit le module d'entrée

import { Component, OnInit ,Input } from ‘@angular/core’;

3. @Input dans le sous-composant reçoit les données du composant parent

export class HeaderComponent implements OnInit {
    @Input()  title:string

    constructor() { }
    ngOnInit() {}
}

4.

Il s'agit du composant head - {

{title}}

5. composants dans les composants enfants

Résumé :

Passer du parent au fils : @input

Passer du fils au parent : ViewChild

3. Le composant déclenche le composant parent via @Output

Exemple de démonstration :

Composant parent : news
Composant enfant : footer

1 Le sous-composant introduit Output et EventEmitter

.

import { Component, OnInit ,Input,Output,EventEmitter} from ‘@angular/core’;

2. Instanciez EventEmitter

@Output()
 private outer=new EventEmitter();
 /用 EventEmitter 和 output 装饰器配合使用 指定类型变量/

dans le sous-composant 3. Le sous-composant diffuse les données via l'instance externe de l'objet EventEmitter

sendParent(){
 this.outer.emit(‘msg from child’)
 }

.

4. Lorsque le composant parent appelle le composant enfant, définissez l'événement de réception, external est l'objet EventEmitter du composant enfant external

Fichier : composantsnewsnews.component.html

< app- footer (outer)="getFooterRun(data)">

5 Lorsque le composant parent reçoit les données, il appellera sa propre méthode getFooterRun. le temps, le composant enfant peut être obtenu Numéro

Fichier : composantsnewsnews.component.ts

//接收子组件传递过来的数据
 getFooterRun(data){
 console.log(data);
 }

Communication du composant non parent-enfant

1. Stockage local (recommandé)

3. Cookie

Résumé :

Utilisation de $emit dans vue

1. Les composants parents peuvent utiliser des

attributs

pour transmettre les données aux composants enfants et les composants enfants Accepter via les accessoires. 2. Les sous-composants peuvent utiliser $emit pour déclencher des événements personnalisés des composants parents.

vm.$emit( event, arg ) //触发当前实例上的事件
vm.$on( event, fn );//监听event事件后运行 fn；

À propos de l'utilisation d'emit dans angulaire

1 Le composant parent peut utiliser l'

attribut

pour transmettre des données au composant enfant, et le composant enfant l'accepte via. @saisir. 2. Les sous-composants peuvent utiliser Output et EventEmitter pour déclencher des événements personnalisés des composants parents.
Composant parent

<app-footer (event)=“getFooterRun(data)”>

Composant enfant

@Output() 
private event=new EventEmitter<string>();
/*用 EventEmitter 和 output 装饰器配合使用 <string>指定类型变量*/

sendParent(){ 
    // outer 相当于是事件名称
    this.event.emit(data)  
 }

<button (event)=“sendParent()”>通过@Output给父组件广播数据

Pour plus de connaissances liées à la programmation, veuillez visiter :

Vidéo de 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!