Heim >Web-Frontend >js-Tutorial >Erfahren Sie mehr über @Input() und @Output() in Angular
Empfohlene verwandte Tutorials: angularjs (Video-Tutorial)
hat nur ein paar einfache Attribute (führen Sie die folgenden Attribute aus, um schnell zu generieren) ng Klassenentität/Student generieren
ng generate class entity/student
export class Student { id: number; name: string; age: number; }
ts
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; import { Student } from '../entity/student'; @Component({ selector: 'app-child', templateUrl: './child.component.html', styleUrls: ['./child.component.css'] }) export class ChildComponent implements OnInit { @Input() stu: Student; @Output() deleteEvent = new EventEmitter<number>(); constructor() { } ngOnInit() { } delete(id) { this.stu = null; this.deleteEvent.emit(id); } }
html
<p *ngIf="stu"> {{stu.id}} -- {{stu.name}} -- {{stu.age}} <button (click)="delete(stu.id)">delete</button> </p>
ts
import { Component } from '@angular/core'; import { Student } from './entity/student'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { stus: Student[] = [ {id: 1, name: '里斯', age: 3}, {id: 2, name: '里斯2', age: 4}, {id: 3, name: '里斯3', age: 5}, ]; stu: Student; constructor() { } selected(stu) { this.stu = stu; } deleteStu(id: number) { this.stus.forEach((val, index) => { if ( val.id === id) { this.stus.splice(index, 1); return; } }); } }
html
<p> <ul> <li *ngFor="let stu of stus" (click)="selected(stu)"> {{stu.id}} -- {{stu.name}} -- {{stu.age}} </li> </ul> </p> <app-child [stu]="stu" (deleteEvent)="deleteStu($event)"></app-child>
@Input()
很简单,就是将父组件的数据给子组件的一个属性;@Output()
rrreee
tsrrreeehtml
rrreee
@Input()
ist sehr einfach, es dient dazu, die Daten der übergeordneten Komponente einem Attribut der untergeordneten Komponente zu übergeben; 🎜@Output();
Untergeordnete Komponente Erstellen Sie einen EventEmitter. Die Operation der untergeordneten Komponente löst den EventEmitter aus und weist dann dieses EventEmitter-Objekt einer Methode der übergeordneten Komponente zu. Die geänderte Methode ruft die vom EventEmitter-Objekt angegebenen Parameter ab und verarbeitet sie sie; 🎜🎜Weitere Programmierkenntnisse finden Sie unter: 🎜Programmierunterricht🎜! ! 🎜🎜Das obige ist der detaillierte Inhalt vonErfahren Sie mehr über @Input() und @Output() in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!