Angular: методы с логическими значениями для совместного использования с не работающими компонентами - PullRequest
Новая
       10

Angular: методы с логическими значениями для совместного использования с не работающими компонентами

0 голосов
/ 16 декабря 2018

Я видел несколько постов об этом решении, но я не могу заставить мой работать.У меня есть два компонента (одного уровня) и много повторяющихся функций, которые я хочу добавить в сервис.Этот пример метода с логическими значениями, я написал в сервисе, компонент может получить доступ к нему, но он не работает.Пример:

Служба: 

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>

С этим последним кодом математикаГотово, отображаются предупреждения, но не div на основе значения c.Я не получаю ошибок, поэтому я должен предположить, что моя логика неверна ..

1 Ответ

0 голосов
/ 16 декабря 2018

Вы не меняете значение 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);
}
...