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

Question

I want to declare HTMLElement variables visible to all functions in given class, however i am unable to do so for some reason. Method of declaring it before constructor and then assigning its value in constructor does not work, but when i declare and assign it in a function, for example employeesClick() it works.

I am trying to avoid using multiple instances of same code, as i need to change other buttons based on which one was clicked.

There are no errors, but nothing happens. How do i do this?

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

You can use the @ViewChild directive. Just create a reference for a button and get an element in your .ts file.

For example, html looks like:

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

In your .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";
}

The buttonRef is a global variable in the class and you can use it where you need.
Don't forget to import ViewChild and ElementRef from @angular/core ;