如何在非父子组件之间共享数据答案

【问题标题】：How to share data between non-Parent-child components如何在非父子组件之间共享数据
【发布时间】：2019-04-18 12:04:22
【问题描述】：

我想根据 app.component 中设置的变量禁用表单的提交按钮。组件没有父子关系。它们使用路由链接。场景：我想根据选择的角色设置一个真或假值。 Hence when the role is selected a function is called to set the Boolean value.

我尝试使用共享服务，但无法检索其他组件中的变量值。我无法订阅布尔值。

app.component.html

<form #roleForm="ngForm">
    <select name="userRole" [(ngModel)]="viewSelected" (click)=SelectRole()>
      <option value="admin">Admin</option>
      <option value="layman">layman</option>
    </select>
  </form>

app.component.ts

SelectRole() {
    this._studentService.onSelectRole().subscribe(data);
  }

service.ts

public viewSelected = "admin";
public buttonDisabled : boolean = true;

onSelectRole() {
    if (this.viewSelected == "admin") {
      this.buttonDisabled = true;
    } else {
      this.buttonDisabled = false;
    }
  }

form.component.html => 这是我尝试使用布尔变量的地方


<form [formGroup]="addForm">

  <mat-label>First Name : </mat-label>
  <mat-form-field>
    <input matInput formControlName="firstName">
  </mat-form-field>
  <br><br>
  <button [disabled]="buttonDisabled" type="submit" (click)="onSubmit()">Submit</button>
</form>

我将角色保留在应用程序组件中，以便可以从任何组件中选择/更改角色。选择/更改角色时，我想根据角色禁用某些按钮。那么我该如何实现呢？我在正确的轨道上吗？还是有其他方法可以做到这一点？

【问题讨论】：

使用服务共享数据。检查此链接的方法4dotnettricks.com/learn/angular/…
直接执行此操作：<button [disabled]="viewSelected !== 'admin' " ...>，而无需在您的服务中使用额外的逻辑。当您将角色保留在应用程序组件中时，它应该可以从其他组件中使用。
正如其他人所说，您可以使用带有 rxjs 的服务在组件之间共享数据。这是一个与 stackblitz 示例类似的问题stackoverflow.com/questions/55317878/…
@Dblaze，您的建议有帮助...按钮已禁用。但它对所有角色都禁用，因为我已将 viewSelected ='admin' 声明为默认值。表单有两种方式绑定设置，我可以看到 viewSelected 的值根据我的选择而变化。但是在禁用条件下条件没有被更新..
查看我的检测更改答案

标签： angular

【解决方案1】：

这是一个可以使用主题的经典案例。

app.component.ts

this.roleChangeSubject$.next(role)

sibling.component.ts

roleSub$:Subscription<string>;
constructor(private sharedService:SharedService) {
this.roleSub$ = this.sharedService.roleChangeSubject$;
}

sibling.component.html

<button [disabled]="roleSub$ | async !== 'admin'"></button>

在服务中更新变量中的值不会在组件中更改，除非该变量是可观察的或侦听发生的值更改的主题。

必须在极端情况下使用changeDetectorRef，而不是在所有情况下。

【讨论】：

【解决方案2】：

使用角度属性 disabled 或 readonly（对于 angular5+）。例子：

<button [disable]=="viewSelected !== 'admin' " ...>
<button [readonly]="viewSelected !== 'admin' " ...>

如果您遇到角色正在更改但按钮未更新的问题，您需要ChangeDetectorRef。这就是你在构造函数中注入它并检测变化的方式（类似于 AngularJS 中的 $scope.$apply）：

// Inject in your constructor:
constructor(private ref: ChangeDetectorRef) {
 ....
}


// And call this:
this.ref.detectChanges();

【讨论】：