Обновить служебную переменную с помощью формы ввода Angular?

Question

Я хочу обновить переменную, которая находится внутри службы в Angular.Я хочу обновить переменную с помощью формы ввода, когда нажимаю кнопку.

Это служба

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class DashService {
  input: number = 0; //Varible that need update
  constructor(private http: HttpClient) { }
  public getVar() {
    return this.input;
  }
  public insertData(data) {
    this.input = data
  }
}

Это компонент

import { DashService } from './dash.service';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    constructor(private service: DashService) { }

  ngOnInit() {
    console.log(  this.service.getVar())
  }
}

Этокомпонент HTML

    <form (submit)="onSubmit(input)">
   <div class="form-group">
    <label>Age</label>
      <input type="numer" class="form-control" [(ngModel)]="age" age="age">
   </div>
   <input type="submit" class="btn btn-success" value="Submit">
</form>

Answer 1

Это должно работать.

служба

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';



@Injectable()
export class DashService {
  input = new BehaviorSubject('test');; //Varible that need update
  constructor(private http: HttpClient) { }

  public getVar() {
    return this.input.asObservable();
  }
  public insertData(data) {
    this.input.next(data);
  }
}

компонент

export class AppComponent {
    public age = '';
    constructor(public service: DashService) { }

  ngOnInit() {
    this.service.getVar().subscribe((data) => {
     console.log(data);
   } )
  }

  onSubmit() {
     this.service.insertData(this.age);
  }
}

html

    <form (submit)="onSubmit()">
   <div class="form-group">
    <label>Age</label>
      <input type="numer" class="form-control" [(ngModel)]="age" age="age">
   </div>
   <input type="submit" class="btn btn-success" value="Submit">
</form>

Answer 2

Я не совсем понял вашу проблему из-за недостатка информации в вашем коде, поэтому попробуйте использовать эту ссылку, которая, на мой взгляд, является лучшим способом для передачи ваших данных через EventEmitter с использованием межкомпонентной связи:

https://angular.io/guide/component-interaction

или вы можете просто использовать субъект из rxjs в качестве наблюдателя и наблюдаемого:

http://reactivex.io/documentation/subject.html