Shulou(Shulou.com)06/02 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.