使用输入表单更新服务变量 角度?

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 中的 Subject 作为观察者和可观察量：

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