APIs used Simple ExampleRender subcomponents in a list, click on a subcomponent to notify the parent component to perform an operation person.tsexport interface Person { name: string; age: number; sex: string; } Parent Componentimport { Component, OnInit } from '@angular/core'; import { Person } from './person'; @Component({ selector: 'app-comp-parent', template: ` <app-comp-child *ngFor="let person of personList" (itemClick)="onItemClick($event)" [data]="person" ></app-comp-child> `, }) export class CompParentComponent implements OnInit { personList: Person[] = [ { name: '张三', age: 21, sex: '男' }, { name: 'Li Si', age: 25, sex: 'Male' }, { name: '李莉', age: 20, sex: '女' }, ]; constructor(){ } ngOnInit(): void { } onItemClick(item: Person){ console.log('click-person: ', item); } } Subcomponentsimport { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; import { Person } from './person'; @Component({ selector: 'app-comp-child', template: ` <div (click)="itemClick.emit(data)"> Name: {{ data.name }} Age: {{ data.age }} Sex: {{ data.sex }} </div> `, }) export class CompChildComponent implements OnInit { @Input() data!: Person; @Output() itemClick = new EventEmitter(); constructor(){ } ngOnInit(): void { } } Effect SummarizeThis article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM! You may also be interested in:
|
<<: Pure CSS code to achieve drag effect
>>: A detailed introduction to Linux memory management and addressing
Table of contents JS function call, apply and bin...
If there are any errors in this article or you ha...
First download the zip archive version from the o...
Table of contents background Achieve a similar ef...
We know that the commonly used events in JS are: ...
Table of contents 1. Modify by binding the style ...
Prerequisite: Save the .frm and .ibd files that n...
Table of contents webpack5 Official Start Buildin...
Table of contents 1 Test Environment 1.1 Server H...
Personally, I think the decompressed version is e...
Table of contents 1. What is Ts 2. Basic Grammar ...
Recently, when I was writing web pages with PHP, I...
In addition to B-Tree indexes, MySQL also provide...
In our daily work, we often come into contact wit...
Implementation requirements The form imitating El...