Bagaimanakah komponen sudut berkomunikasi? 2 kaedah untuk komunikasi komponen ibu bapa-anak

Artikel ini akan membawa anda melalui komunikasi komponen dalam Angular dan memperkenalkan kaedah komunikasi antara komponen ibu bapa dan anak serta komunikasi antara komponen tanpa hubungan langsung.

Dalam aplikasi sebenar, komponen kami akan dikaitkan dalam struktur pokok, jadi hubungan antara komponen adalah terutamanya:

• Hubungan bapa-anak

• Hubungan abang

• Tiada hubungan langsung

【 Tutorial berkaitan cadangan: "tutorial sudut"]

Sediakan persekitaran kita:

1. Cipta headerKomponen: ng g c components/header

<app-button></app-button>
<app-title></app-title>
<app-button></app-button>

export class HeaderComponent implements OnInit {

  constructor() {}

  ngOnInit(): void {}
}

2 Cipta komponen title: ng g c components/title

<span>{{title}}</span>

export class TitleComponent implements OnInit {

  public title: string = '标题';

  constructor() {}

  ngOnInit(): void {}
}

3 >buttonng g c components/button

<button>{{ btnName }}</button>

export class ButtonComponent implements OnInit {
  public btnName: string = '按钮';

  constructor() {}

  ngOnInit(): void {}
}

Panggil terus

untuk komponen hubungan ibu bapa-anak, sila ambil perhatian bahawa Panggilan terus membuat gandingan antara komponen ibu bapa dan anak lebih tinggi Untuk menggunakannya dengan jelas, anda benar-benar perlu memanggilnya secara langsung.

1 Pasang komponen pengepala kami ke dalam apl supaya hubungan komponen induk-anak terbentuk antara apl dan pengepala

2 komponen untuk komponen kami komponen dikembangkan, kita boleh Memanggil sifat dan fungsi dalam pengepala subkomponen dalam apl komponen induk

# 5. Langkah keempat ialah beroperasi dalam templat html komponen induk. Kadang-kadang kita juga perlu melakukan operasi dalam ts komponen induk Sub-komponen dikendalikan dalam kelas, dan kami akan menunjukkan seterusnya. <app-header></app-header>

6. Kita perlu menggunakan penghias baharu

export class HeaderComponent implements OnInit {
  public name: string = 'HeaderComponent';

  printName(): void {
    console.log('component name is', this.name);
  }
}

<app-header #header></app-header>
<p>
  调用子组件属性: {{ header.name }}
  <button (click)="header.printName()">调用子组件函数</button>
</p>

@Input dan @Output

@ViewChild(Component)

Terpakai kepada komponen hubungan ibu bapa-anak

export class AppComponent {
  title = 'angular-course';

  @ViewChild(HeaderComponent)
  private header!: HeaderComponent;

	// 声明周期钩子: 组件及子组件视图更新后调用,执行一次
  ngAfterViewInit(): void {
    // 调用子组件属性
    console.log(this.header.name);
    // 调用子组件函数
    this.header.printName();
  }
}

1 Kami mentakrifkan dalam komponen untuk merungkai masalah pengembangan kompleks yang disebabkan oleh panggilan langsung dalam komponen <.>

2. Tambahkan penghias @Input() pada atribut

dalam komponen :

3. Tambahkan atribut tajuk pada komponen pengepala dan tetapkan nilai : header titletitle4 Mari kita gunakan komponen

dalam templat

komponen title seperti ini: title@Input() public title: string = '标题';

5 kesan semasa. Walaupun antara muka Hodoh, tetapi adakah lebih mudah untuk menetapkan

pada masa akan datang apabila menggunakan komponen public title: string = '我是新标题';

headerhtml 6. Langkah di atas menyedari bahawa data komponen induk dihantar kepada komponen anak, kemudian Mari kita lihat seterusnya bagaimana data komponen anak dihantar ke komponen induk Mari kita gunakan penghias title untuk melaksanakan perkara berikut <app-title></app-title>

7. Tambah? atribut

kepada kelas ts bagi komponen title :

8 Edarkan data dengan kerap dalam kelas ts bagi komponen

@Output()

9. . Sekarang mari kita ubah suai komponen induk pengepala untuk menerima data yang dihantar:

titletitleChange@Output() public titleChange = new EventEmitter();

Gunakan minat mudah perkhidmatan untuk komunikasititle

ngOnInit(): void {
  // 定时将子组件的数据进行派发
  setInterval(() => {
  	this.titleChange.emit(this.title);
	}, 1500);
}

Terpakai kepada komponen yang tidak mempunyai hubungan langsung

<app-title 
	[title]="title" 
  (titleChange)="onChildTitleChange($event)">
</app-title>

onChildTitleChange(value: any) {
	console.log('onChildTitleChange: >>', value);
}

1 Memandangkan kita ingin berkomunikasi melalui perkhidmatan, mari buat perkhidmatan dahulu: , dan kami mengisytiharkan atribut jenis

untuk membantu komunikasi

2 Untuk menyelamatkan masalah, kami tidak akan mencipta semula komponen, kerana komponen butang dan komponen tajuk dalam

kami adalah komponen yang. tidak mempunyai hubungan langsung.

3. Ubah komponen

kami dan tambahkan acara klik untuk mencetuskan fungsi

ng g s services/EventBusSubject

4. Simulasikan pemerolehan data dalam komponen

@Injectable({
  providedIn: 'root',
})
export class EventBusService {
  public eventBus: Subject<any> = new Subject();

  constructor() {}
}

header

buttonGunakan kuki, sesi atau storan setempat untuk berkomunikasi triggerEventBus

export class ButtonComponent implements OnInit {
  public btnName: string = '按钮';

  constructor(public eventBusService: EventBusService) {}

  ngOnInit(): void {}

  public triggerEventBus(): void {
    this.eventBusService.eventBus.next('我是按钮组件');
  }
}

title

1. Kami masih menggunakan komponen title dan komponen button untuk demonstrasi. Mari kita tunjukkan button, semua yang lain adalah sama. localstorage

2. Simpan

dalam cangkuk title komponen ngOnInit() ke title: localstoragewindow.localStorage.setItem('title', this.title);

3. Dapatkan data dalam komponen butang:

const title = window.localStorage.getItem('title');

Kesimpulan:

Dalam artikel ini kami memperkenalkan komunikasi komponen Angular, yang menyediakan asas untuk komunikasi yang munasabah antara Jaminan komponen kami , kami telah menggunakan komponen dengan memperkenalkan teg setakat ini.

Alamat asal: https://juejin.cn/post/6991471300837572638

Pengarang: Xiaoxin

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila Lawati :

Pengenalan kepada Pengaturcaraan! !

Atas ialah kandungan terperinci Bagaimanakah komponen sudut berkomunikasi? 2 kaedah untuk komunikasi komponen ibu bapa-anak. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!