Angular：具有布尔值的方法与不工作的组件共享

Posted 2023-02-23

【中文标题】Angular：具有布尔值的方法与不工作的组件共享

【英文标题】：Angular: methods with boolean values to share with components not working

【发布时间】：2019-05-17 03:41:47

【问题描述】：

我已经看过几篇关于这个解决方案的帖子，但我不能让我的工作。我有两个组件（相同级别）和许多我想放入服务的重复功能。这个带有布尔值的示例方法，我在服务中编写，组件可以访问它，但它不起作用。示例：

服务：

langSwitch(fr:boolean, eng:boolean) 
    if (fr=== true && eng === false) 
      fr = false;
      eng = true;
     else if (fr === false && eng === true) 
      fr = true;
      eng = false;
    
  

组件：

engActive=true;
frActive=false;

langSwitch()
  this.local.langSwitch(this.frActive, this.engActive);

html

 <div class="row">
      <div class="col-10 text-right">
        <h4 (click)="langSwitch
        ()">FR</h4>
      </div>
      <div class="col-2 text-left">
        <h4 (click)="langSwitch()">EN</h4>
      </div>
    </div>

另一半/工作示例@veben

服务：

mathTest( a: number, b: number, c:boolean)
    let x = a * b > 0;
    if(x)
          alert('correct');
          c = true;
          return alert(a*b)
        

  

组件 TS

a:number;
b:number;
c=false

mathTest() 
this.local.mathTest(this.a, this.b, this.c);

HTML：

<div class="row">
  <input type="text" class="form-control" [(ngModel)]="a">
  <input type="text" class="form-control" [(ngModel)]="b">
  <button class="btn btn-danger" (click)="mathTest()">Calculate!</button>
  <div *ngIf="c" class="alert alert-danger col-md-6 offset-md-3" role="alert">
    Hello!
  </div>
</div>

使用最后这段代码，算术完成，警报显示，但不是基于 c 值的 div。我没有得到错误，所以我必须假设我的逻辑是错误的..

【问题讨论】：

有人吗？

您可以编辑您的帖子并添加您遇到的错误吗？

问题是我没有错误，布尔值只是不改变状态。我将再次尝试编辑

@veben，刚刚编辑过

我的问题是改变服务中c的状态

【参考方案1】：

您不会在组件中更改c 的值，而只是在您的服务中本地更改。根据您的第二个示例尝试以下代码：

服务：

// return true if a * b > 0
mathTest(a: number, b: number): boolean 
    return a * b > 0;

组件：

a: number = 2;
b: number = 1;
c: boolean = false;

// Controller with service injection
// ...

ngOnInit() 
    this.c = this.local.mathTest(this.a, this.b);