Question

我有一个表单，并带有一些输入字段和一个按钮。填写表单并单击按钮后，我打开一个包含数据表的模态（根据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()

因此，我认为可以在ngOnit的{{1}}中进行检查，但是后来我意识到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; 
    }
 }
}

希望这会有所帮助！

从组件移开后，禁用角度功能按钮

2 个答案: