Angularコンポーネント間で通信するにはどうすればよいですか?次の記事では、Angular でのコンポーネント通信の方法について説明します。
前回の記事では、 Angular と NG-ZORRO の迅速な開発の組み合わせについて話しました。フロントエンド開発は主にコンポーネントベースの開発であり、コンポーネント間の通信と常に切り離すことができません。では、Angular 開発では、コンポーネント間の通信はどのようなものになるのでしょうか? [関連チュートリアルの推奨事項: "
angular チュートリアル"]
1 つの例から推測すると、この記事は純粋なテキストであり、比較的退屈です。コンソールに表示される内容はあまり役に立たないので、画像は省略します。うーん、読者の皆さんは説明コードに従って理解していただければ幸いです~Vue
と
Reactはマイナーな点で似ています。違い
コードを見せてください。
<!-- 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) } }
子コンポーネントからのデータを監視した後、
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>
ファイルの呼び出し後: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">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)
}
}</pre><div class="contentsignin">ログイン後にコピー</div></div>
このメソッドには制限がありますか? つまり、サブプロパティの修飾子は
protected または
private の場合、エラーが報告されます。サブコンポーネントの修飾子を変更してみてください。エラーの理由は次のとおりです:
protected | |
#private | |
##4. サービスを通じて |
rxjs は、
Observables
rxjs
を記録する記事が後ほどありますので、お楽しみに
次に、親コンポーネントと子コンポーネントで参照し、情報を共有します。まず、
parent-and- という名前のファイルを作成しましょう。子
サービス。// 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 } }) } }
親コンポーネントでは、1 秒後に値を変更します。したがって、親子コンポーネントでは、
msg の初期値 null
が入力されるとすぐに出力され、1 秒後に変更された値Jimmy# が出力されます。 ## が出力されます。同様に、子コンポーネントにサービス情報を指定すると、子コンポーネントが関連する値を出力するときに、親コンポーネントにも出力されます。プログラミング関連の知識について詳しくは、プログラミング入門
をご覧ください。 !
以上がAngular コンポーネント間の通信のいくつかの方法を説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。