각도의 @Input() 및 @Output()에 대해 알아보기

권장 관련 튜토리얼: angularjs(비디오 튜토리얼)

학생 클래스 만들기

에는 몇 가지 간단한 속성만 있습니다(빠르게 생성하려면 다음 속성을 실행하세요)
ng 생성 클래스 엔터티/학생ng generate class entity/student

export class Student {
    id: number;
    name: string;
    age: number;
}

创建child component

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>

修改 app.component

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

app.comComponent 수정 🎜ts🎜rrreee🎜html🎜rrreee🎜@Input()은 매우 간단합니다. 상위 구성 요소의 데이터를 하위 구성 요소의 속성에 제공하는 것입니다. 🎜@Output() 하위 구성 요소 EventEmitter를 생성합니다. 하위 구성 요소의 작업은 EventEmitter를 트리거한 다음 이 EventEmitter 개체를 상위 구성 요소의 메서드에 할당합니다. 수정된 메서드는 EventEmitter 개체에서 제공한 매개 변수를 가져온 다음 처리합니다. 🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 교육🎜을 방문하세요! ! 🎜🎜

위 내용은 각도의 @Input() 및 @Output()에 대해 알아보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!