Example Analysis of Communication between angular parent and Child components
This article mainly introduces the example analysis of angular parent-son component communication, which is very detailed and has a certain reference value. Interested friends must read it!
The api used
Input-defines acceptable properties in the child component that can be used by the parent component to pass data to the child component
Output-the property of the output defined in the child component, which needs to be the event type of EventEmitter and is used to notify the parent component to take the appropriate action
EventEmitter-used in components with @ Output instructions to issue custom events synchronously or asynchronously and to register handlers for these events by subscribing to an instance.
A simple example
List to render the child component, click the child component to inform the parent component to operate
Person.tsexport interface Person {name: string; age: number; sex: string;} parent component import {Component, OnInit} from'@ angular/core';import {Person} from'. / person' @ Component ({selector: 'app-comp-parent', template: ``,}) export class CompParentComponent implements OnInit {personList: Person [] = [{name:' Zhang San', age: 21, sex: 'male'}, {name:'Li Si', age: 25, sex: 'male'}, {name:'Li Li', age: 20, sex: 'female'},] Constructor () {} ngOnInit (): void {} onItemClick (item: Person) {console.log ('click-person:', item);}} subcomponent import {Component, EventEmitter, Input, OnInit, Output} from'@ angular/core';import {Person} from'. / person' @ Component ({selector: 'app-comp-child', template: `Name: {{data.name}} Age: {{data.age}} Sex: {{data.sex}`,}) export class CompChildComponent implements OnInit {@ Input () databoxes: Person; @ Output () itemClick = new EventEmitter (); constructor () {} ngOnInit (): void {}} effect
The above is all the contents of the article "sample Analysis of angular parent-Child component Communication". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!
