Angular 2 căn bản - Bài 13. Sự Tương tác giữa các component

bởi Bạch Ngọc Toàn vào 23/01/2017 thuộc Lập trình Angular 2 căn bản . Lượt xem: 9,773

Bài này chúng ta sẽ học về @Input, @Ouput và @ViewChild trong Angular 2. Giúp tương tác qua lại giữa các component

import { Component,Input,Output,EventEmitter} from '@angular/core';

@Component({
    selector: 'my-tutorial',
    template: `
    <h2>{{title}}</h2>
    <p>Child component: {{name}}</p>

    <button [disabled]="voted" (click)="vote(true)">Agree</button>
    <button [disabled]="voted" (click)="vote(false)">Disgree</button>
    Result: {{voted}}
    `
})
export class TutorialComponent {
    @Input() name:string;

    @Output() onVote = new EventEmitter<boolean>();
    public voted:boolean =false;

    setName(name:string){
        this.name = name;
    }
    vote(agree:boolean){
        this.voted = true;
        this.onVote.emit(agree);
    }
}