时间戳

首页 > 解决方案 > Angular：具有布尔值的方法与不工作的组件共享

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

问题描述

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

服务：

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。我没有得到错误，所以我不得不假设我的逻辑是错误的..

标签： angulartypescriptservicecomponents

解决方案

您不会更改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);
}

推荐阅读