Question

离开组件后，角度禁用按钮

2019-04-16

630

angular

我有一个表单，上面有一些输入字段和一个按钮。填写完表单并点击按钮后，我打开了一个模态框，里面有数据表（根据 component1 选择的表单值）。

然后用户从这个模态框中选择了一些数据。用户完成并关闭模态框后，我将显示另一个选定值的第三个组件。仅供参考，我也通过我的服务存储了这些选定的值。

当用户从我的模态框中选择了一些数据时，我需要禁用此按钮，如果他们取消选择数据，我想启用此按钮。

如何在 component1 中检查数据选择（即是否在模态框中选择了数据）时启用/禁用此按钮。由于它已经加载，所以不起作用。

下面是我的部分相关代码。

按钮：

 <button (click)="clicked()" type="button" [disabled]="isButtonDisabled" class="btn default">Click</button>

组件：

export class Component1 implements OnInit {
  isButtonDisabled: boolean:false;
  constructor(private myService: MyService) {}

  ngOnInit() {
    if(this.myService.getSelectedData().length>0 {
       this.isButtonDisabled = true; 
     }else{
        this.isButtonDisabled = false; 
    }
 }
}

myService 在用户进行选择或删除选择时保存数据。

this.myService.getSelectedData()

因此，我认为在 component1 的 ngOnit 中检查这一点会起作用，但后来我意识到 component1 已加载。

有人可以指出这个问题的解决方案吗？

谢谢

Answer 1

您可以按如下方式公开您的服务：
constructor(public myService: MyService) {

并且在您的模板中您可以像这样直接检查该函数：

[disabled]="myService.getSelectedData().length > 0

并且您可以删除 ngOninit 中的代码

Answer 2

您可以在组件中使用 ngAfterContentInit 方法。

https://angular.io/api/core/AfterContentInit

export class Component1 implements OnInit {
  isButtonDisabled: boolean:false;
  constructor(private myService: MyService) {}

  ngAfterContentInit() {
    if(this.myService.getSelectedData().length>0 {
       this.isButtonDisabled = true; 
     }else{
        this.isButtonDisabled = false; 
    }
 }
}

希望这对您有帮助！