01/10/2018, 16:40

"this" keyword trong Angular 6

Mọi người cho mình hỏi tại sao ở angular 6, các method trong component hoặc directive lại luôn có pointer ‘this’ thế ? Mình ko hiểu về cái đó cho lắm, mong mọi người chỉ dẫn

VD:

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

@Component({
  selector: 'app-voter',
  templateUrl: './voter.component.html',
})

export class VoterComponent implements OnInit {

	constructor() {};
	
	ngOnInit() {};

  @Input() name: string;
  @Output() voted = new EventEmitter<boolean>();
  didVote:boolean = false;

  vote (agreed: boolean) {
  	this.voted.emit(agreed);
  	this.didVote = true;
  }
}

trong method vote lại có this, nếu mình bỏ qua là nó kêu Error ấy

Trương Tấn Phát viết 18:46 ngày 01/10/2018

Lỗi gì. Xem nội dung lỗi là biết lý do.

Jacger_Quang viết 18:48 ngày 01/10/2018

Vd nếu mình bỏ this:
vote (agreed: boolean) {
voted.emit(agreed);
didVote = true;
}

thì nó ghi là :
Can not find name ‘didVote’. Did you mean the instance member ‘this.didVote’ ?
Can not find name ‘voted’. Did you mean the instance member ‘this.voted’ ?

Và mình cx để ý là trong mọi method ở trong component hay directive đều có this, phải chăng ‘this’ dùng để chỉ đến các thành phần DOM ở HTML kết nối đến các method đấy ko ? Nếu ko có ‘this’ thì Các phần từ DOM sẽ sử dụng các method trong component hoặc directive kiểu gì ?

Ý hiểu của mình là như thế, bạn xem có đúng phần nào ko? Nếu chưa chuẩn thì mong bạn chỉnh cho mình nhé, mình mới tập tành angular 1 tẹo nên chưa biết nhiều về nó lắm, cảm ơn bạn

Trương Tấn Phát viết 18:45 ngày 01/10/2018

Khi bạn không dùng this thì nó lại hiểu là bạn đang truy xuất tên biến trong phương thức hiện tại.
Vd

export class VoterComponent implements OnInit {

	constructor() {};
	
	ngOnInit() {};

  @Input() name: string;
  @Output() voted = new EventEmitter<boolean>();
  didVote:boolean = false;
  a:string="outer";
  b:boolean=false;

  test (b:boolean) {
        a:string ="inner";
  	
        // this.a có giá trị là outer
        // a có giá trị là inner
        // this.b = false
        // b là tham số của phương thức
  }
}

Jacger_Quang viết 18:45 ngày 01/10/2018

Cảm ơn bạn nhé, đã hiểu

H20 viết 18:42 ngày 01/10/2018

con trỏ this mình dùng thấy khá giống this bên java. Chắc có lẽ do typescript có vay mượn cú pháp của các ngôn ngữ như C#, java

Bình luận về bài viết này

Chia sẻ tin đăng đến bạn bè

Gửi Messenger

Bài liên quan

Jacger_Quang

0 chủ đề

0 bài viết

Tác giả nổi bật