Mari kita bincangkan tentang cara berkomunikasi antara komponen dalam Angular

Artikel ini akan membantu anda meneruskan pembelajaran angular dan mempelajari tentang kaedah komunikasi komponen dalam Angular, saya harap ia akan membantu semua orang!

Dalam artikel sebelum ini, kita bercakap tentang Angular digabungkan dengan NG-ZORRO untuk pembangunan pesat . Pembangunan front-end sebahagian besarnya adalah pembangunan berasaskan komponen dan sentiasa tidak dapat dipisahkan daripada komunikasi antara komponen. Jadi, dalam pembangunan Angular, bagaimanakah komunikasi antara komponennya? [Tutorial berkaitan yang disyorkan: "tutorial sudut"]

Buat inferens daripada satu contoh, Vue dan React kebanyakannya sama

Artikel ini adalah teks tulen, perbandingan membosankan. Oleh kerana perkara yang dicetak oleh konsol agak tidak berguna, saya tidak memasukkan gambar Hmm~ Saya harap pembaca dapat dengan mudah menyerapnya dengan mengikuti kod penjelasan~

1 kepada komponen anak melalui atribut

Ia adalah bersamaan dengan anda menyesuaikan sifat dan menghantar nilai kepada subkomponen melalui pengenalan komponen. Show you the CODE.

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

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

Panggil subkomponen dalam komponen induk, di sini namakan atribut 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 {
  }
}

Komponen anak menerima pembolehubah parentProp yang dihantar oleh komponen induk dan mengisinya semula ke halaman.

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

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

2 Komponen anak menghantar maklumat kepada komponen induk melalui peristiwa Pemancar

Salurkan data komponen anak kepada komponen induk melalui 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');
  }
}

Memberitahu komponen induk melalui emit dan komponen induk mendengar acara tersebut.

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

Dalam komponen induk, selepas kami memantau data daripada komponen child, operasi tak segerak setTimeout digunakan di sini. Ini kerana kami melakukan emit selepas memulakannya dalam subkomponen Operasi tak segerak di sini adalah untuk mengelakkan Race Condition ralat persaingan.

Kami juga perlu menambah kaedah fromChild dalam komponen, seperti berikut:

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

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

3. Melalui rujukan, komponen induk memperoleh sifat dan kaedah komponen kanak-kanak

Kami memperoleh objek subkomponen dengan memanipulasi rujukan, dan kemudian mengakses sifat dan kaedahnya.

Kami mula-mula menetapkan kandungan demo subkomponen:

// 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.')
  }
}

Kami menetapkan pengecam rujukan subkomponen pada komponen induk #childComponent:

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

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

dan kemudian javascript Panggil pada fail:

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

}

Adakah terdapat pengehadan kepada kaedah ini, iaitu, pengubah suai atribut perlu public Apabila ia protected atau private, ralat akan dilaporkan. Anda boleh cuba menukar pengubah suai subkomponen. Sebab ralat adalah seperti berikut:

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

4 Ubah

Mari tunjukkan dengan rxjs.

rxjs ialah perpustakaan untuk pengaturcaraan reaktif menggunakan Observables, yang memudahkan untuk menulis kod tak segerak atau berasaskan panggilan balik.

Akan ada rekod artikel kemudian rxjs, jadi nantikan

Mari buat perkhidmatan bernama parent-and-child dahulu.

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

Seterusnya, kami merujuknya dalam komponen ibu bapa dan anak, dan maklumat mereka dikongsi.

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

Dalam komponen induk, kami menukar nilai selepas satu saat. Jadi dalam komponen induk-anak, nilai awal msg null akan dicetak sebaik sahaja ia masuk, dan kemudian selepas satu saat, nilai yang diubah Jimmy akan dicetak. Dengan cara yang sama, jika anda memberikan maklumat perkhidmatan dalam komponen kanak-kanak, semasa komponen kanak-kanak mencetak nilai yang berkaitan, ia juga akan dicetak dalam komponen induk.

【Tamat】

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Pengenalan kepada Pengaturcaraan! !

Atas ialah kandungan terperinci Mari kita bincangkan tentang cara berkomunikasi antara komponen dalam Angular. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!