Führt Sie durch verschiedene Kommunikationsmethoden zwischen Angular-Komponenten

AngularWie kommuniziert man zwischen Komponenten? Der folgende Artikel führt Sie durch die Methode der Komponentenkommunikation in Angular. Ich hoffe, er ist hilfreich für Sie!

Im vorherigen Artikel haben wir über Angular in Kombination mit NG-ZORRO für eine schnelle Entwicklung gesprochen. Die Frontend-Entwicklung ist weitgehend komponentenbasierte Entwicklung und immer untrennbar mit der Kommunikation zwischen Komponenten verbunden. Wie sieht also in der Angular-Entwicklung die Kommunikation zwischen seinen Komponenten aus? [Verwandte Tutorial-Empfehlungen: „Angular 开发中，其组件之间的通信是怎么样的呢？【相关教程推荐：《angular教程》】

举一反三，Vue 和 React 中大同小异

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

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

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

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

<app-child [parentProp]="&#39;My kid.&#39;"></app-child>

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

// child.component.ts

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

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

  constructor() { }

  ngOnInit(): void {
  }
}

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

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

<h1>Hello! {{ parentProp }}</h1>

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

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

// child.component.ts

import { Component, OnInit, Output, EventEmitter } from '@angular/core';

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

  constructor() { }

  ngOnInit(): void {
    this.childSayHi.emit('My parents');
  }
}

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

// parent.component.ts

import { Component, OnInit } from '@angular/core';

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

  public msg:string = ''

  constructor() { }

  ngOnInit(): void {
  }

  fromChild(data: string) {
    // 这里使用异步
    setTimeout(() => {
      this.msg = data
    }, 50)
  }
}

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

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

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

<h1>Hello! {{ msg }}</h1>
<app-child (childSayHi)="fromChild($event)"></app-child>

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

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

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

// child.component.ts

import { Component, OnInit } from '@angular/core';

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

  // 子组件的属性
  public childMsg:string = 'Prop: message from child'

  constructor() { }

  ngOnInit(): void {
    
  }

  // 子组件方法
  public childSayHi(): void {
    console.log('Method: I am your child.')
  }
}

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

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

<app-child #childComponent></app-child>

之后在 javascript 文件上调用：

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

@Component({
  selector: 'app-communicate',
  templateUrl: './communicate.component.html',
  styleUrls: ['./communicate.component.scss']
})
export class CommunicateComponent implements OnInit {
  @ViewChild('childComponent')
  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)
  }

}

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

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

4. 通过 service 去变动

我们结合 rxjs 来演示。

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

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

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

// parent-and-child.service.ts

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

@Injectable({
  providedIn: 'root'
})
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);
  }
}

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

// parent.component.ts

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

@Component({
  selector: 'app-communicate',
  templateUrl: './communicate.component.html',
  styleUrls: ['./communicate.component.scss']
})
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();
  }
}

import { Component, OnInit } from '@angular/core';
import { ParentAndChildService } from 'src/app/services/parent-and-child.service';

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

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

Leiten Sie andere Fälle aus einem Beispiel ab: Vue und React sind ähnlich, mit einigen geringfügigen Unterschieden🎜 Blockzitat>🎜Dieser Artikel ist reiner Text, relativ langweilig. Da die von der Konsole gedruckten Dinge relativ nutzlos sind, füge ich keine Bilder hinzu. Hmm ~ Ich hoffe, dass die Leser es leicht verstehen können, indem sie dem Erklärungscode ~ 🎜

1 folgen . Die übergeordnete Komponente übergibt das Attribut. Die Übergabe von Werten an Unterkomponenten

🎜 entspricht der Anpassung einer Eigenschaft und der Übergabe des Werts an Unterkomponenten durch die Einführung der Komponente. Zeige dir den CODE. 🎜rrreee🎜Rufen Sie die untergeordnete Komponente in der übergeordneten Komponente auf und benennen Sie hier ein parentProp-Attribut. 🎜rrreee🎜Die untergeordnete Komponente akzeptiert die von der übergeordneten Komponente übergebene Variable parentProp und füllt sie auf der Seite auf. 🎜rrreee

2. Die untergeordnete Komponente übergibt Informationen an die übergeordnete Komponente über das Emitter-Ereignis

🎜Durch new EventEmitter() Übergeben Sie die Daten der untergeordneten Komponente an die übergeordnete Komponente. 🎜rrreee🎜 Benachrichtigen Sie die übergeordnete Komponente über <code>emit, und die übergeordnete Komponente wartet auf das Ereignis. 🎜rrreee🎜Nachdem wir in der übergeordneten Komponente die Daten der untergeordneten-Komponente überwacht haben, verwenden wir die asynchrone Operation von setTimeout. Dies liegt daran, dass wir emit nach der Initialisierung der Unterkomponente ausgeführt haben. Die asynchrone Operation dient dazu, Wettbewerbsfehler durch Race Condition zu verhindern. 🎜🎜Wir müssen der Komponente auch die Methode fromChild hinzufügen, wie folgt: 🎜rrreee

3 Durch Referenz erhält die übergeordnete Komponente die Eigenschaften und Methoden der untergeordneten Komponente

🎜Wir erhalten das Unterkomponentenobjekt durch Bearbeiten der Referenz und greifen dann auf seine Eigenschaften und Methoden zu. 🎜🎜Wir legen zunächst den Demo-Inhalt der untergeordneten Komponente fest: 🎜rrreee🎜Wir setzen den Referenzbezeichner der untergeordneten Komponente #childComponent auf der übergeordneten Komponente: 🎜rrreee🎜Dann auf javascript Dateiaufruf: 🎜rrreee🎜Gibt es eine Einschränkung für diese Methode? Das heißt, der Modifikator der Untereigenschaft muss <code>öffentlich sein, wenn er geschützt ist oder private Manchmal wird ein Fehler gemeldet. Sie können versuchen, den Modifikator der Unterkomponente zu ändern. Der Grund für den Fehler ist wie folgt: 🎜Erlaubt den Aufruf innerhalb der Klasse und die Verwendung in geerbten Unterklassen, der Geltungsbereich ist moderat tr>

Type	Usage Range
public	Ermöglicht den Aufruf innerhalb und außerhalb der Klasse, wobei der breiteste Geltungsbereich
geschützt
privat	Die Verwendung innerhalb der Klasse ist erlaubt , der Umfang ist am engsten

Änderung durch Service

🎜Wir kombinieren rxjs zur Demonstration. 🎜🎜rxjs ist eine Bibliothek für reaktive Programmierung mit Observables, die das Schreiben von asynchronem oder Callback-basiertem Code erleichtert. 🎜

🎜Es wird später einen Artikel geben, der rxjs aufzeichnet, also bleiben Sie dran🎜

🎜Lassen Sie uns zunächst einen Dienst namens parent-and-child erstellen. 🎜rrreee🎜Als nächstes verweisen wir darauf in den übergeordneten und untergeordneten Komponenten und ihre Informationen werden geteilt. 🎜rrreeerrreee🎜In der übergeordneten Komponente ändern wir den Wert nach einer Sekunde. In der Eltern-Kind-Komponente wird also der Anfangswert null von msg gedruckt, sobald er eintrifft, und dann nach einer Sekunde der geänderte Wert Jimmy

Das obige ist der detaillierte Inhalt vonFührt Sie durch verschiedene Kommunikationsmethoden zwischen Angular-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!