Une brève discussion sur la méthode de transmission des paramètres entre les composants parent et enfant dans Angular-js tutoriel-php.cn

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

青灯夜游

Libérer： 2021-03-09 09:54:25

avant

2413 Les gens l'ont consulté

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.

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

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方法’);
 }

Copier après la connexion

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>

Copier après la connexion

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

2. ViewChild

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

Copier après la connexion

< 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;

Copier après la connexion

4. -component

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

Copier après la connexion

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

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>

Copier après la connexion

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

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

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

Copier après la connexion

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

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

    constructor() { }
    ngOnInit() {}
}

Copier après la connexion

Il s'agit du composant head - {

{title}}

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

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’;

Copier après la connexion

2. Instanciez EventEmitter

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

Copier après la connexion

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

Copier après la connexion

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

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)">

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

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

Copier après la connexion

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；

Copier après la connexion

À 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)”>

Copier après la connexion

Composant enfant

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

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

Copier après la connexion

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

Copier après la connexion

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!