Dieser Artikel wird Ihnen dabei helfen, Angular weiter zu lernen und mehr über die Komponentenkommunikationsmethoden in Angular zu erfahren. Ich hoffe, dass er für alle hilfreich ist!
Im vorherigen Artikel haben wir über Angular in Kombination mit NG-ZORRO für eine schnelle Entwicklung gesprochen. Die Frontend-Entwicklung ist größtenteils eine komponentenbasierte Entwicklung und immer untrennbar mit der Kommunikation zwischen Komponenten verbunden. Wie sieht also in der Angular-Entwicklung die Kommunikation zwischen den Komponenten aus? [Verwandte Tutorial-Empfehlungen: „Angular 开发中，其组件之间的通信是怎么样的呢？【相关教程推荐：《angular教程》】
举一反三，
Vue和React中大同小异
本文纯文字，比较枯燥。因为控制台打印的东西比较鸡肋，所以就不配图了，嗯～希望读者跟着说明代码走一遍更容易吸收～
相当于你自定义了一个属性，通过组件的引入，将值传递给子组件。Show you the CODE。
<!-- parent.component.html --> <app-child [parentProp]="'My kid.'"></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>通过 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>我们通过操纵引用的方式，获取子组件对象，然后对其属性和方法进行访问。
我们先设置子组件的演示内容：
// 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 | 允许在类内部中使用，作用范围最窄 |
我们结合 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('Parent: ' + msg);
// 刚进来打印 Parent: null
// 一秒后打印 Parent: Jimmy
}
});
setTimeout(() => {
this.parentAndChildService.setMessage('Jimmy');
}, 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:VueundReactsind ähnlich, mit einigen geringfügigen Unterschieden1 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 einparentProp-Attribut. 🎜rrreee🎜Die untergeordnete Komponente akzeptiert die von der übergeordneten Komponente übergebene VariableparentPropund füllt sie auf der Seite auf. 🎜rrreee2. Die untergeordnete Komponente übergibt Informationen an die übergeordnete Komponente über das Emitter-Ereignis
🎜Durchnew 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 deruntergeordneten-Komponente überwacht haben, verwenden wir die asynchrone Operation vonsetTimeout. Dies liegt daran, dass wiremitnach der Initialisierung der Unterkomponente ausgeführt haben. Die asynchrone Operation dient dazu, Wettbewerbsfehler durchRace Conditionzu verhindern. 🎜🎜Wir müssen der Komponente auch die MethodefromChildhinzufügen, wie folgt: 🎜rrreee3 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#childComponentauf der übergeordneten Komponente: 🎜rrreee🎜Dann aufjavascript Dateiaufruf: 🎜rrreee🎜Gibt es eine Einschränkung für diese Methode? Das heißt, der Modifikator der Untereigenschaft muss <code>öffentlichsein, wenn ergeschütztist oderprivateManchmal wird ein Fehler gemeldet. Sie können versuchen, den Modifikator der Unterkomponente zu ändern. Der Grund für den Fehler ist wie folgt: 🎜
Type Usage Range public Ermöglicht den Aufruf innerhalb und außerhalb der Klasse, wobei der breiteste Geltungsbereich geschützt Erlaubt den Aufruf innerhalb der Klasse und die Verwendung in geerbten Unterklassen, der Geltungsbereich ist moderatprivat Die Verwendung innerhalb der Klasse ist erlaubt , der Umfang ist am engsten tr>Änderung durch Service
🎜Wir kombinierenrxjszur Demonstration. 🎜🎜rxjs ist eine Bibliothek für reaktive Programmierung mitObservables, die das Schreiben von asynchronem oder Callback-basiertem Code erleichtert. 🎜🎜Später wird es einen Artikel geben, der🎜Lassen Sie uns zunächst einen Dienst namensrxjsaufzeichnet, also bleiben Sie dran🎜parent-and-childerstellen. 🎜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 Anfangswertnullvonmsggedruckt, sobald er eintrifft, und dann nach einer Sekunde der geänderte WertJimmy
Das obige ist der detaillierte Inhalt vonLassen Sie uns darüber sprechen, wie Komponenten in Angular miteinander kommunizieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
