Perbincangan ringkas tentang cara berkomunikasi antara komponen ibu bapa dan anak Angular

Artikel ini akan membawa anda melalui komunikasi komponen dalam Angular dan memperkenalkan kaedah komunikasi komponen induk kepada komponen kanak-kanak dan komponen anak berkomunikasi kepada komponen induk saya harap ia akan membantu semua orang.

Komunikasi komponen

Komponen adalah bebas sepenuhnya, jadi data antara satu sama lain tidak akan dikongsi jika anda ingin berkongsi data antara komponen, anda mesti Melaksanakan komunikasi antara komponen. [Tutorial berkaitan yang disyorkan: "tutorial sudut"]

Komunikasi antara komponen

• Komponen induk berkomunikasi dengan komponen anak

• Komponen anak berkomunikasi dengan komponen induk

ng6 Untuk mencapai komunikasi antara komponen, throughput disediakan: Input, Output

Komponen induk berkomunikasi dengan komponen anak

ng6 dilaksanakan berdasarkan ts, jadi data komunikasi mesti menentukan jenis (memahami struktur dalaman, memperuntukkan ruang memori)

Komponen induk berkomunikasi dengan anak Untuk komunikasi komponen, subkomponen ialah penerima, jadi gunakan throughput Input

untuk mencapai komunikasi daripada komponen induk kepada subkomponen dalam 6 langkah

Langkah pertama Dalam templat komponen induk, hantar data kepada komponen anak Jika data berubah secara dinamik, anda boleh menggunakan [] gula sintaks

Langkah kedua mentakrifkan kelas model data (jika data sangat Mudah, anda boleh meninggalkan langkah ini)

Anda juga boleh menggunakan arahan ng untuk menentukan kelas model

ng class 类名

Konvensyen penamaan untuk kelas model: Kami boleh mentakrifkannya sebagai fail .model.ts. Anda juga boleh meletakkan fail terus dalam direktori model dan mentakrifkannya sebagai fail .ts

Langkah 3 Dalam subkomponen, perkenalkan kelas model

Langkah Keempat Dalam subkomponen, perkenalkan Input throughput

Langkah 5 Terdapat dua cara untuk menerima data melalui throughput

• Cara pertama ialah menerima data melalui kelas anotasi input throughput

@Input() 数据名称: 模型类;

• Cara kedua ialah menerima data melalui input meta-maklumat anotasi daripada komponen

Dalam kelas anotasi: input: [属性数据]

Dalam komponen: 属性数据: 模型类;

Langkah 6 Gunakan data, kerana Data ditambahkan pada komponen itu sendiri, jadi anda boleh menggunakan

sama ada dalam komponen atau dalam templat Contohnya:

// 4 引入吞吐器
import { Component, OnInit, Input } from '@angular/core';
// 3 引入模型类
import { Data } from '../../models/data';
@Component({
    selector: 'app-inputs',
    templateUrl: './inputs.component.html',
    styleUrls: ['./inputs.component.css'],
    // 5 通过元信息接收
    inputs: ['color', 'data']
})
export class InputsComponent implements OnInit {
    // 5 接收数据
    // @Input() data: Data;
    // @Input() color: string;
    // 声明类型
    data: Data;
    color: string;
    constructor() {
        // 6 组件中使用
        console.log(this)
    }
    ngOnInit() {
    }
}

komponen anak kepada komponen induk Komunikasi

Komunikasi antara komponen anak dan komponen induk adalah berdasarkan acara tersuai. Untuk sub-komponen, ia adalah penerbit, jadi gunakan Output throughput

untuk melaksanakan komunikasi daripada sub-komponen kepada komponen induk dalam enam langkah

The langkah pertama Dalam templat komponen induk, simulasi peristiwa DOM dan ikat kaedah komponen induk kepada elemen komponen anak Gunakan () gula sintaks

contohnya (demo)="dealDemo($event)"

Untuk menghantar data, tambahkan $event

Langkah 2 Dalam subkomponen, perkenalkan Output throughput

Langkah 3 Dalam subkomponen, perkenalkan modul acara EventEmitter

Langkah 4 Terdapat dua cara untuk mencipta objek acara untuk subkomponen

• Yang pertama Daftar melalui Output throughput

@Output() 属性名称 = new EventEmitter()

• Jenis kedua juga boleh diterima melalui output meta-maklumat beranotasi

Dalam anotasi, daftarkan output atribut: [属性名称]

Dalam komponen, cipta objek acara 属性名称 = new EventEmitter()

Langkah 5 Dalam sub -komponen, lulus pancaran objek acara Kaedah menerbitkan mesej, dan parameter ialah data yang diluluskan

Langkah 6 Dalam komponen induk, terima data yang diluluskan oleh komponen anak melalui kaedah komponen induk

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
@Component({
    selector: 'app-outputs',
    templateUrl: './outputs.component.html',
    styleUrls: ['./outputs.component.css'],
    // 元信息注册事件对象
    outputs: ['sendMessage']
})
export class OutputsComponent implements OnInit {
    // 4 注册事件对象
    // @Output() sendMessage = new EventEmitter();
    // 实例化
    sendMessage = new EventEmitter();
    constructor() { }
    ngOnInit() {
    }
    // 事件回调函数
    demo() {
        // console.log(111, this)
        // 5 点击按钮的时候，向父组件发布消息
        this.sendMessage.emit({
            msg: 'hello菜鸟',
            color: 'red'
        })
    }
}

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

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