Analisis ringkas tentang cara berkomunikasi antara komponen bukan ibu bapa dan anak dalam Angular

Bagaimana untuk berkomunikasi antara komponen bukan ibu bapa-anak dalam Angular? Artikel ini akan memperkenalkan kepada anda cara Angular komponen bukan ibu bapa-anak berkomunikasi melalui perkhidmatan. Saya harap ia akan membantu anda!

Malah, apabila ia berkaitan dengan penyampaian nilai antara komponen ibu bapa dan anak, kami sangat mengenalinya dan ia adalah perkara biasa dalam proses pelaksanaan perniagaan.

Tetapi pelaksanaan saya melibatkan peringkat silang (iaitu, pemindahan nilai antara komponen bukan ibu bapa dan anak Ya, saya boleh meneruskannya selapis demi selapis dan mendapatkannya dalam komponen induk). cara untuk menghantar nilai daripada subkomponen? [Cadangan tutorial berkaitan: "tutorial sudut"]

Latar belakang keperluan:

mempunyai sub-komponen, yang boleh difahami sebagai yang ketiga komponen -level. Terdapat kotak drop-down dalam komponen ini Apabila tag li tertentu diklik, nilai yang dipilih yang sepadan perlu dihantar ke komponen peringkat pertama Pada masa yang sama, komponen peringkat pertama meminta senarai antara muka dengan nilai yang diterima, dan kemudian muat semula data.

Idea awal:

Pada masa itu, saya berfikir untuk menyimpan nilai yang dipilih oleh pengguna melalui localstorage, dan kemudian mengeluarkan nilai melalui localstorage dalam komponen sedang digunakan. Antara muka permintaan nilai ini, walau bagaimanapun, ia tidak boleh dilaksanakan dalam masa nyata bolehkah saya memberitahu komponen induk.

Mata teknikal:

Komponen induk sudut dan komponen anak berkomunikasi melalui perkhidmatan

Komponen induk dan komponen anaknya berkongsi The perkhidmatan yang sama digunakan untuk melaksanakan komunikasi dua hala dalam keluarga komponen.

Skop contoh perkhidmatan ini terhad kepada komponen induk dan komponen anaknya. Komponen di luar subpokok komponen ini tidak akan dapat mengakses perkhidmatan atau berkomunikasi dengan mereka.

Prinsip

Komponen induk dan komponen anaknya berkongsi perkhidmatan yang sama, dan perkhidmatan ini digunakan untuk mencapai komunikasi dua hala dalam keluarga komponen.

Skop contoh perkhidmatan ini terhad kepada komponen induk dan komponen anaknya. Komponen di luar subpokok komponen ini tidak akan dapat mengakses perkhidmatan atau berkomunikasi dengan mereka. Perkhidmatan ialah jambatan antara komponen kanak-kanak dan komponen induk Kerana perkhidmatan boleh disuntik dengan mudah ke dalam komponen lain, dan kerana objek Subjek boleh multicast (menghantar) data kepada komponen yang melanggan objek ini, ia digabungkan dengan Perkhidmatan dan Subjek Angular dalam Rxjs. boleh merealisasikan komunikasi data antara komponen dengan mudah.

Pelaksanaan:

Buat fail perkhidmatan dalam subkomponen, kodnya adalah seperti berikut:

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class HeaderActionService {
  public pageTenantMode = new Subject<string>();
  // 获得一个Observable;
  missionConfirmed$ = this.pageTenantMode.asObservable();
  constructor() {}

  setParams(params) {
    this.pageTenantMode.next(params);
  }
}

Data subkomponen lapisan memanggil kaedah di atas, Pas nilai masuk.

this.tenantModeService.setParams（）

Suntikan perkhidmatan di atas di mana komponen induk memanggilnya Kod adalah seperti berikut:

    headerModeService.missionConfirmed$.subscribe(
        () => {
          this.mode = headerModeService.pageTenantMode;
          this.initTableData();
        }
      );

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

Atas ialah kandungan terperinci Analisis ringkas tentang cara berkomunikasi antara komponen bukan ibu bapa dan anak dalam Angular. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!