学生クラスの作成単純な属性はいくつかしかありません (次の属性を実行するとすぐに生成できます)#関連チュートリアルの推奨事項: angularjs(ビデオ チュートリアル)
ng クラス エンティティ/学生を生成します
export class Student { id: number; name: string; age: number; }
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); } }
<p *ngIf="stu"> {{stu.id}} -- {{stu.name}} -- {{stu.age}} <button (click)="delete(stu.id)">delete</button> </p>
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; } }); } }
<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() 子コンポーネントは EventEmitter を作成します。子コンポーネントの操作により EventEmitter がトリガーされ、この EventEmitter オブジェクトが親コンポーネントのメソッドに割り当てられます。変更されたメソッドは、EventEmitter オブジェクトによって指定されたパラメータを取得して、それを処理します。
プログラミング関連の知識について詳しくは、
以上がAngular の @Input() と @Output() について学びますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。