Table des matières
1. 父组件通过属性传递值给子组件
2. 子组件通过 Emitter 事件传递信息给父组件
3. 通过引用,父组件获取子组件的属性和方法
4. 通过 service 去变动
1. . Le composant parent transmet l'attribut Passer des valeurs aux sous-composants
2. Le composant enfant transmet les informations au composant parent via l'événement Emitter
3. Par référence, le composant parent obtient. Propriétés et méthodes du composant enfant
4 Changement via le service
Maison interface Web js tutoriel Vous présente plusieurs méthodes de communication entre les composants angulaires

Vous présente plusieurs méthodes de communication entre les composants angulaires

Dec 26, 2022 pm 07:51 PM
angular 组件通信

AngularComment communiquer entre composants ? L'article suivant vous présentera la méthode de communication des composants dans Angular. J'espère qu'il vous sera utile !

Vous présente plusieurs méthodes de communication entre les composants angulaires

Dans l'article précédent, nous avons parlé de Angular combiné avec NG-ZORRO pour un développement rapide. Le développement front-end est en grande partie basé sur les composants et est toujours indissociable de la communication entre les composants. Alors, dans le développement Angular, à quoi ressemble la communication entre ses composants ? [Recommandations de didacticiel associées : "Angular 开发中,其组件之间的通信是怎么样的呢?【相关教程推荐:《angular教程》】

举一反三,VueReact 中大同小异

本文纯文字,比较枯燥。因为控制台打印的东西比较鸡肋,所以就不配图了,嗯~希望读者跟着说明代码走一遍更容易吸收~

1. 父组件通过属性传递值给子组件

相当于你自定义了一个属性,通过组件的引入,将值传递给子组件。Show you the CODE

<!-- parent.component.html -->

<app-child [parentProp]="&#39;My kid.&#39;"></app-child>
Copier après la connexion

在父组件中调用子组件,这里命名一个 parentProp 的属性。

// child.component.ts

import { Component, OnInit, Input } from &#39;@angular/core&#39;;

@Component({
  selector: &#39;app-child&#39;,
  templateUrl: &#39;./child.component.html&#39;,
  styleUrls: [&#39;./child.component.scss&#39;]
})
export class ChildComponent implements OnInit {
  // 输入装饰器
  @Input()
  parentProp!: string;

  constructor() { }

  ngOnInit(): void {
  }
}
Copier après la connexion

子组件接受父组件传入的变量 parentProp,回填到页面。

<!-- child.component.html -->

<h1>Hello! {{ parentProp }}</h1>
Copier après la connexion

2. 子组件通过 Emitter 事件传递信息给父组件

通过 new EventEmitter() 将子组件的数据传递给父组件。

// child.component.ts

import { Component, OnInit, Output, EventEmitter } from &#39;@angular/core&#39;;

@Component({
  selector: &#39;app-child&#39;,
  templateUrl: &#39;./child.component.html&#39;,
  styleUrls: [&#39;./child.component.scss&#39;]
})
export class ChildComponent implements OnInit {
  // 输出装饰器
  @Output()
  private childSayHi = new EventEmitter()

  constructor() { }

  ngOnInit(): void {
    this.childSayHi.emit(&#39;My parents&#39;);
  }
}
Copier après la connexion

通过 emit 通知父组件,父组件对事件进行监听。

// parent.component.ts

import { Component, OnInit } from &#39;@angular/core&#39;;

@Component({
  selector: &#39;app-communicate&#39;,
  templateUrl: &#39;./communicate.component.html&#39;,
  styleUrls: [&#39;./communicate.component.scss&#39;]
})
export class CommunicateComponent implements OnInit {

  public msg:string = &#39;&#39;

  constructor() { }

  ngOnInit(): void {
  }

  fromChild(data: string) {
    // 这里使用异步
    setTimeout(() => {
      this.msg = data
    }, 50)
  }
}
Copier après la connexion

在父组件中,我们对 child 组件来的数据进行监听后,这里采用了 setTimeout 的异步操作。是因为我们在子组件中初始化后就进行了 emit,这里的异步操作是防止 Race Condition 竞争出错。

我们还得在组件中添加 fromChild 这个方法,如下:

<!-- parent.component.html -->

<h1>Hello! {{ msg }}</h1>
<app-child (childSayHi)="fromChild($event)"></app-child>
Copier après la connexion

3. 通过引用,父组件获取子组件的属性和方法

我们通过操纵引用的方式,获取子组件对象,然后对其属性和方法进行访问。

我们先设置子组件的演示内容:

// child.component.ts

import { Component, OnInit } from &#39;@angular/core&#39;;

@Component({
  selector: &#39;app-child&#39;,
  templateUrl: &#39;./child.component.html&#39;,
  styleUrls: [&#39;./child.component.scss&#39;]
})
export class ChildComponent implements OnInit {

  // 子组件的属性
  public childMsg:string = &#39;Prop: message from child&#39;

  constructor() { }

  ngOnInit(): void {
    
  }

  // 子组件方法
  public childSayHi(): void {
    console.log(&#39;Method: I am your child.&#39;)
  }
}
Copier après la connexion

我们在父组件上设置子组件的引用标识 #childComponent

<!-- parent.component.html -->

<app-child #childComponent></app-child>
Copier après la connexion

之后在 javascript 文件上调用:

import { Component, OnInit, ViewChild } from &#39;@angular/core&#39;;
import { ChildComponent } from &#39;./components/child/child.component&#39;;

@Component({
  selector: &#39;app-communicate&#39;,
  templateUrl: &#39;./communicate.component.html&#39;,
  styleUrls: [&#39;./communicate.component.scss&#39;]
})
export class CommunicateComponent implements OnInit {
  @ViewChild(&#39;childComponent&#39;)
  childComponent!: ChildComponent;

  constructor() { }

  ngOnInit(): void {
    this.getChildPropAndMethod()
  }

  getChildPropAndMethod(): void {
    setTimeout(() => {
      console.log(this.childComponent.childMsg); // Prop: message from child
      this.childComponent.childSayHi(); // Method: I am your child.
    }, 50)
  }

}
Copier après la connexion

这种方法有个限制?,就是子属性的修饰符需要是 public,当是 protected 或者 private 的时候,会报错。你可以将子组件的修饰符更改下尝试。报错的原因如下:

类型使用范围
public允许在累的内外被调用,作用范围最广
protected允许在类内以及继承的子类中使用,作用范围适中
private允许在类内部中使用,作用范围最窄

4. 通过 service 去变动

我们结合 rxjs 来演示。

rxjs 是使用 Observables 的响应式编程的库,它使编写异步或基于回调的代码更容易。

后期会有一篇文章记录 rxjs,敬请期待

我们先来创建一个名为 parent-and-child 的服务。

// parent-and-child.service.ts

import { Injectable } from &#39;@angular/core&#39;;
import { BehaviorSubject, Observable } from &#39;rxjs&#39;; // BehaviorSubject 有实时的作用,获取最新值

@Injectable({
  providedIn: &#39;root&#39;
})
export class ParentAndChildService {

  private subject$: BehaviorSubject<any> = new BehaviorSubject(null)

  constructor() { }
  
  // 将其变成可观察
  getMessage(): Observable<any> {
    return this.subject$.asObservable()
  }

  setMessage(msg: string) {
    this.subject$.next(msg);
  }
}
Copier après la connexion

接着,我们在父子组件中引用,它们的信息是共享的。

// parent.component.ts

import { Component, OnDestroy, OnInit } from &#39;@angular/core&#39;;
// 引入服务
import { ParentAndChildService } from &#39;src/app/services/parent-and-child.service&#39;;
import { Subject } from &#39;rxjs&#39;
import { takeUntil } from &#39;rxjs/operators&#39;

@Component({
  selector: &#39;app-communicate&#39;,
  templateUrl: &#39;./communicate.component.html&#39;,
  styleUrls: [&#39;./communicate.component.scss&#39;]
})
export class CommunicateComponent implements OnInit, OnDestroy {
  unsubscribe$: Subject<boolean> = new Subject();

  constructor(
    private readonly parentAndChildService: ParentAndChildService
  ) { }

  ngOnInit(): void {
    this.parentAndChildService.getMessage()
      .pipe(
        takeUntil(this.unsubscribe$)
      )
      .subscribe({
        next: (msg: any) => {
          console.log(&#39;Parent: &#39; + msg); 
          // 刚进来打印 Parent: null
          // 一秒后打印 Parent: Jimmy
        }
      });
    setTimeout(() => {
      this.parentAndChildService.setMessage(&#39;Jimmy&#39;);
    }, 1000)
  }

  ngOnDestroy() {
    // 取消订阅
    this.unsubscribe$.next(true);
    this.unsubscribe$.complete();
  }
}
Copier après la connexion
import { Component, OnInit } from &#39;@angular/core&#39;;
import { ParentAndChildService } from &#39;src/app/services/parent-and-child.service&#39;;

@Component({
  selector: &#39;app-child&#39;,
  templateUrl: &#39;./child.component.html&#39;,
  styleUrls: [&#39;./child.component.scss&#39;]
})
export class ChildComponent implements OnInit {
  constructor(
    private parentAndChildService: ParentAndChildService
  ) { }
  
  
  // 为了更好理解,这里我移除了父组件的 Subject
  ngOnInit(): void {
    this.parentAndChildService.getMessage()
      .subscribe({
        next: (msg: any) => {
          console.log(&#39;Child: &#39;+msg);
          // 刚进来打印 Child: null
          // 一秒后打印 Child: Jimmy
        }
      })
  }
}
Copier après la connexion

在父组件中,我们一秒钟之后更改值。所以在父子组件中,一进来就会打印 msg 的初始值 null,然后过了一秒钟之后,就会打印更改的值 JimmyTutoriel angulaire"]

Déduisez d'autres cas à partir d'un exemple, Vue et React sont similaires avec quelques différences mineures🎜 blockquote>🎜Cet article est du pur texte, relativement ennuyeux . Parce que les éléments imprimés par la console sont relativement inutiles, je n'inclus pas d'images Hmm~ J'espère que les lecteurs pourront facilement les absorber en suivant le code explicatif~🎜

1. . Le composant parent transmet l'attribut Passer des valeurs aux sous-composants

🎜 équivaut à personnaliser une propriété et à transmettre la valeur aux sous-composants via l'introduction du composant. Montrez-vous le CODE. 🎜rrreee🎜Appelez le composant enfant dans le composant parent, nommez ici un attribut parentProp. 🎜rrreee🎜Le composant enfant accepte la variable parentProp transmise par le composant parent et la remplit dans la page. 🎜rrreee

2. Le composant enfant transmet les informations au composant parent via l'événement Emitter

🎜Grâce à new EventEmitter() Transmettez les données du composant enfant au composant parent. 🎜rrreee🎜Avertissez le composant parent via <code>emit, et le composant parent écoute l'événement. 🎜rrreee🎜Dans le composant parent, après avoir surveillé les données du composant child, nous utilisons l'opération asynchrone de setTimeout. C'est parce que nous avons effectué emit après l'initialisation du sous-composant. L'opération asynchrone ici consiste à éviter les erreurs de compétition Race Condition. 🎜🎜Nous devons également ajouter la méthode fromChild dans le composant, comme suit : 🎜rrreee

3. Par référence, le composant parent obtient. Propriétés et méthodes du composant enfant

🎜Nous obtenons l'objet sous-composant en manipulant la référence, puis accédons à ses propriétés et méthodes. 🎜🎜Nous définissons d'abord le contenu démo du composant enfant : 🎜rrreee🎜Nous définissons l'identifiant de référence du composant enfant #childComponent sur le composant parent : 🎜rrreee🎜Puis sur le javascript fichier Appel : 🎜rrreee🎜Y a-t-il une limitation à cette méthode ? Autrement dit, le modificateur de la sous-propriété doit être <code>public, lorsqu'il est protégé. ou privé Parfois, une erreur sera signalée. Vous pouvez essayer de changer le modificateur du sous-composant. La raison de l'erreur est la suivante : 🎜Permet d'être appelé au sein de la classe Et utilisé dans les sous-classes héritées, la portée est modérée tr>
Type Plage d'utilisation
public Permet d'être appelé à l'intérieur et à l'extérieur de la classe, avec la portée la plus large
protégé
privée Il est autorisé à être utilisé à l'intérieur de la classe , la portée est la plus étroite

4 Changement via le service

. 🎜Nous combinons rxjs pour démontrer. 🎜🎜rxjs est une bibliothèque de programmation réactive utilisant Observables, ce qui facilite l'écriture de code asynchrone ou basé sur un rappel. 🎜
🎜Il y aura un article enregistrant rxjs plus tard, alors restez à l'écoute🎜
🎜Créons d'abord un service nommé parent-and-child . 🎜rrreee🎜Ensuite, nous le référençons dans les composants parent et enfant, et leurs informations sont partagées. 🎜rrreeerrreee🎜Dans le composant parent, nous modifions la valeur après une seconde. Ainsi dans le composant parent-enfant, la valeur initiale null de msg sera imprimée dès son arrivée, puis après une seconde, la valeur modifiée Jimmy

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment installer Angular sur Ubuntu 24.04 Comment installer Angular sur Ubuntu 24.04 Mar 23, 2024 pm 12:20 PM

Angular.js est une plateforme JavaScript librement accessible pour créer des applications dynamiques. Il vous permet d'exprimer rapidement et clairement divers aspects de votre application en étendant la syntaxe HTML en tant que langage de modèle. Angular.js fournit une gamme d'outils pour vous aider à écrire, mettre à jour et tester votre code. De plus, il offre de nombreuses fonctionnalités telles que le routage et la gestion des formulaires. Ce guide expliquera comment installer Angular sur Ubuntu24. Tout d’abord, vous devez installer Node.js. Node.js est un environnement d'exécution JavaScript basé sur le moteur ChromeV8 qui vous permet d'exécuter du code JavaScript côté serveur. Être à Ub

Explication détaillée du gestionnaire d'état d'apprentissage angulaire NgRx Explication détaillée du gestionnaire d'état d'apprentissage angulaire NgRx May 25, 2022 am 11:01 AM

Cet article vous donnera une compréhension approfondie du gestionnaire d'état NgRx d'Angular et vous présentera comment utiliser NgRx. J'espère qu'il vous sera utile !

Une brève analyse de la façon d'utiliser monaco-editor en angulaire Une brève analyse de la façon d'utiliser monaco-editor en angulaire Oct 17, 2022 pm 08:04 PM

Comment utiliser monaco-editor en angulaire ? L'article suivant enregistre l'utilisation de monaco-editor dans angulaire qui a été utilisé dans une entreprise récente. J'espère qu'il sera utile à tout le monde !

Un article explorant le rendu côté serveur (SSR) dans Angular Un article explorant le rendu côté serveur (SSR) dans Angular Dec 27, 2022 pm 07:24 PM

Connaissez-vous Angular Universel ? Cela peut aider le site Web à fournir un meilleur support SEO !

Comment utiliser PHP et Angular pour le développement front-end Comment utiliser PHP et Angular pour le développement front-end May 11, 2023 pm 04:04 PM

Avec le développement rapide d'Internet, la technologie de développement front-end s'améliore et se répète constamment. PHP et Angular sont deux technologies largement utilisées dans le développement front-end. PHP est un langage de script côté serveur capable de gérer des tâches telles que le traitement des formulaires, la génération de pages dynamiques et la gestion des autorisations d'accès. Angular est un framework JavaScript qui peut être utilisé pour développer des applications monopage et créer des applications Web composées de composants. Cet article explique comment utiliser PHP et Angular pour le développement front-end et comment les combiner.

Composants angulaires et leurs propriétés d'affichage : comprendre les valeurs par défaut non bloquantes Composants angulaires et leurs propriétés d'affichage : comprendre les valeurs par défaut non bloquantes Mar 15, 2024 pm 04:51 PM

Le comportement d'affichage par défaut des composants du framework Angular ne concerne pas les éléments au niveau du bloc. Ce choix de conception favorise l'encapsulation des styles de composants et encourage les développeurs à définir consciemment la manière dont chaque composant est affiché. En définissant explicitement l'affichage des propriétés CSS, l'affichage des composants angulaires peut être entièrement contrôlé pour obtenir la mise en page et la réactivité souhaitées.

Que dois-je faire si le projet est trop gros ? Comment diviser raisonnablement les projets Angular ? Que dois-je faire si le projet est trop gros ? Comment diviser raisonnablement les projets Angular ? Jul 26, 2022 pm 07:18 PM

Le projet Angular est trop volumineux, comment le diviser raisonnablement ? L'article suivant vous expliquera comment diviser raisonnablement les projets Angular. J'espère qu'il vous sera utile !

Parlons de la façon de personnaliser le format angulaire-datetime-picker Parlons de la façon de personnaliser le format angulaire-datetime-picker Sep 08, 2022 pm 08:29 PM

Comment personnaliser le format angulaire-datetime-picker ? L'article suivant explique comment personnaliser le format. J'espère qu'il sera utile à tout le monde !

See all articles