如何在 Angular component.ts 中的 function 之外聲明 HTMLElement 變量？

Question

我想聲明 HTMLElement 變量對給定 class 中的所有函數可見，但是由於某種原因我無法這樣做。 在構造函數之前聲明它然后在構造函數中分配它的值的方法不起作用，但是當我在 function 中聲明並分配它時，例如 employeesClick() 它可以工作。

我試圖避免使用相同代碼的多個實例，因為我需要根據單擊的按鈕更改其他按鈕。

沒有錯誤，但沒有任何反應。 我該怎么做呢？

export class HeaderComponent implements OnInit {

  projects:HTMLElement;
  constructor() { 
    this.projects=document.getElementById('projects');
  }

  ngOnInit() {
  }

  projectsClick(){
    this.projects.style.color="#DEA731";
  }
  employeesClick(){
    var employees : HTMLElement = document.getElementById('employees');
    employees.style.color="#DEA731";
  }
}

Answer 1

您可以使用@ViewChild指令。 只需為按鈕創建一個引用並在您的.ts文件中獲取一個元素。

例如，html 看起來像：

<button #btn> ... </button>

在您的.ts中：

export class HeaderComponent implements OnInit {

@ViewChild('btn') buttonRef: ElementRef;

...
someMethod(){
  //do something like change a text color of your button
  this.buttonRef.nativeElement.style.color = "#aaa";
}

buttonRef是 class 中的全局變量，您可以在需要的地方使用它。
不要忘記從@angular/core導入ViewChild和ElementRef ；