Question

我有一个小的帮助程序类，需要进行一些DOM操作。我试图在this之后使用ViewChild（）和其他一些代码，但是它无法编译。我猜ViewChild（）需要@Component指令才能工作？

我当前的课程是：

  @Injectable()
  export class calculator {

   constructor(){}

   calculate(calling_btn:string){

    //while a rather longish calcualtion is done, I need to disable the specific btn that called the calculate method. then display the result.

    @ViewChild(calling_btn) ele: ElementRef;
   }

html：

     <button #stage1 (click)="calculate('stage1')">Stage 1</button>

最多可以有15个请求计算的按钮，我想禁用每个请求计算的按钮，然后返回结果。它正在运行，但有时用户多次单击一个按钮，而我想停止该按钮。

如果我使用getElementById，效果很好，但我读到它不是一个好习惯。有想法吗？

Answer 1

首先，您需要有一段计算功能。
其次，您不希望用户在计算过程中与按钮进行交互

因此，我认为解决这两个问题的简单方法是禁用按钮。

您的模板：

<button #stage1 (click)="calculate('stage1')" [disabled]="isCaculating">Stage 1</button>

您的组件，计算之后，我们将再次分配isCaculating = false：

 @Injectable()
 export class calculator {
   isCaculating: boolean;
   constructor(){
   }

   calculate(calling_btn:string){
     this.isCaculating = true;
     //while a rather longish calcualtion is done, I need to disable the specific btn that called the calculate method. then display the result.
     this.isCaculating = false;
     @ViewChild(calling_btn) ele: ElementRef;
 }

我只是注意到您在计算时使用了按钮的字符串，因此我猜想可能会有多个具有不同字符串的按钮，例如'stag2'和'stage3'。

<button #stage1 (click)="calculate('stage1')" [disabled]="isCaculating['stage1']">Stage 1</button>


@Injectable()
 export class calculator {
   isCaculating: {};
   constructor(){
   }

   calculate(calling_btn:string){
     this.isCaculating[calling_btn] = true;
     //while a rather longish calcualtion is done, I need to disable the specific btn that called the calculate method. then display the result.
     this.isCaculating[calling_btn] = false;
     @ViewChild(calling_btn) ele: ElementRef;
 }

因此，在您的组件内部，isCaculating现在将成为一个对象，其中key是您的按钮字符串，并且值将是boolean，以决定是否在以下情况下禁用按钮：计算与否。

希望这会有所帮助。

从angular 6的帮助器类访问DOM元素

1 个答案: