Get best of the week

Berbagai cara untuk meneruskan data ke komponen Angular

Halo, Habr! Saya mempersembahkan untuk Anda terjemahan dari artikel “Berbagai Cara untuk Memberikan Masukan ke Komponen dalam Sudut” oleh Netanel Basal.

gambar

Pada artikel ini, kami akan menganalisis tiga cara berbeda untuk mentransfer data ke suatu komponen. Dalam contoh berikut, kami akan menggunakan pilih sebagai komponen utama, tetapi metode yang digunakan di dalamnya relevan dalam komponen lain.

Buat komponen pilih yang menerima ukuran dan penempatan input berikut .

Menggunakan Input


Metode pertama yang kita semua kenal adalah menggunakan dekorator Input .

@Component({
  selector: 'app-select',
  template: `
    <p><b>Size</b> {{ size }}</p>
    <p><b>Placement:</b> {{ placement }}</p>    
    `
})
export class SelectComponent {
  @Input() size: 'sm' | 'md' | 'lg' = 'md';
  @Input() placement: 'top' | 'bottom' | 'right' | 'left'  = 'bottom'
}

Dan kode ini berfungsi dengan baik, kecuali tidak begitu fleksibel. Sebagai contoh, kita perlu mengatur variabel ukuran ke besar untuk setiap pilih dalam aplikasi kita. Karena itu, kami harus mengizinkan klien untuk menulis ulang input apa pun secara global.

Menggunakan Ketergantungan Injeksi


Untuk melakukan ini, kita bisa menggunakan fungsi injeksi dependensi sudut.

import { InjectionToken, Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class SelectConfig {
  size: 'sm' | 'md' | 'lg' = 'md'
  placement: 'top' | 'bottom' | 'right' | 'left' = 'bottom';
}

export function setSelectConfig(config: Partial<SelectConfig>) {
  return {
    ...new SelectConfig(),
    ...config
  }
}

Pertama, kita perlu membuat konfigurasi penyedia. Penyedia ini dapat digunakan sebagai token , ketik , dan juga menetapkan nilai default untuk setiap input . Kami menggunakan ini dalam komponen pilihan kami :

@Component({
  selector: 'app-select',
  template: `
    <p><b>Size</b> {{ size }}</p>
    <p><b>Placement:</b> {{ placement }}</p>    
    `
})
export class SelectComponent {
  @Input() size: SelectConfig['size'];
  @Input() placement: SelectConfig['placement'];

  constructor(private config: SelectConfig) {
    this.size = config.size;
    this.placement = config.placement;
  }
}

Sekarang kita dapat menulis ulang input yang dipilih di tingkat aplikasi kita:

@NgModule({
  providers: [
    {
      provide: SelectConfig,
      useValue: setSelectConfig({
        size: 'lg'
      })
    }
  ]
  bootstrap: [AppComponent]
})
export class AppModule { }

Tapi itu belum semuanya. Kita juga dapat menggunakan ini untuk melewatkan berbagai input di tingkat komponen. Misalnya, kami memiliki komponen yang kami gunakan beberapa kali dalam aplikasi. Dalam setiap kasus, kita perlu menggunakan nilai kecil :

@Component({
  selector: 'app-todos-page',
  template: `<app-select></app-select>`,
  providers: [
    {
      provide: SelectConfig,
      useValue: setSelectConfig({
        size: 'sm'
      })
    }
  ]
})
export class TodosPageComponent {}

Kami dapat menambahkan ini ke komponen penyedia dan nilai ini akan digunakan untuk semua komponen yang dideklarasikan dan anak dalam template. Tetapi kita masih dapat menulis ulang variabel ini secara langsung sebagai berikut:

@Component({
  selector: 'app-todos-page',
  template: `
   <app-select></app-select>
   <app-select size="lg"></app-select>
`,
  providers: [
    {
      provide: SelectConfig,
      useValue: setSelectConfig({
        size: 'sm'
      })
    }
  ]
})
export class TodosPageComponent {}

Strategi yang sama digunakan untuk modul-modul malas karena ia menciptakan injeksi baru.

Menggunakan Arahan


Misalkan kita memiliki komponen dengan banyak input. Kami menetapkan nilai yang sama untuk sebagian besar dari mereka. Dalam contoh, akan terlihat seperti ini:

<!-- It can be in the same template or in different places in the app -->
<app-select size="lg" position="right" inputThree="someValue"></app-select>
<app-select size="lg" position="right" inputThree="someValue"></app-select>
<app-select size="lg" position="right  inputThree="someValue"></app-select>
<app-select size="lg" position="right" inputThree="someValue"></app-select>
<app-select size="lg" position="right" inputThree="someValue"></app-select>

Kami dapat mengulangi nilai-nilai ini, tetapi kami dapat membuat arahan yang akan melewati nilai yang diperlukan dari semua variabel:

@Directive({
  selector: '[selectConfigOne]',
  providers: [{
    provide: SelectConfig,
    useValue: setSelectConfig({
      size: 'lg',
      placement: 'right',
      inputThree: 'someValue'
    })
  }]
})
export class SelectConfigOneDirective {}

Dan kita dapat menggunakan arahan ini di mana kita membutuhkan:

<h1>Using Inputs</h1>
<app-select size="lg"></app-select>
<app-select placement="top"></app-select>

<h1>Using a Directive</h1>
<app-select selectConfigOne></app-select>

<app-todos-page></app-todos-page>

More articles:


All Articles