Javascript 如何在不相关的组件之间共享数据?角度6
我有两个组件,其中第二个组件根据在第一个组件中选择的名称进行更改 如果我在第一个组件中选择“Bryan”,我的服务将获取数据库中有关Bryan的信息,并移动到我的第二个组件,因为它具有生成包含该信息的表的功能 我试图使用Subject类,但无法将emit与可观察的HTTP请求的返回相关联 模板Javascript 如何在不相关的组件之间共享数据?角度6,javascript,mysql,node.js,angular,typescript,Javascript,Mysql,Node.js,Angular,Typescript,我有两个组件,其中第二个组件根据在第一个组件中选择的名称进行更改 如果我在第一个组件中选择“Bryan”,我的服务将获取数据库中有关Bryan的信息,并移动到我的第二个组件,因为它具有生成包含该信息的表的功能 我试图使用Subject类,但无法将emit与可观察的HTTP请求的返回相关联 模板 <form class="mt-4" [formGroup]="managerForm"> <ng-container *ngFor="let teamSale of teamSal
<form class="mt-4" [formGroup]="managerForm">
<ng-container *ngFor="let teamSale of teamSales">
<label for="ManagerName" class="mt-2">{{ teamSale }}</label>
<select id="ManagerName" class="form-control form-control-sm" formControlName="ManagerName" (change)="getAccountsByName()">
<ng-container *ngFor="let manager of managers">
<option *ngIf="manager.Team === teamSale" [value]="manager.Name">{{ manager.Name }}</option>
</ng-container>
</select>
<hr>
</ng-container>
</form>
{{teamSale}}
{{manager.Name}
服务
import { Injectable } from "@angular/core";
import { HttpClient } from '@angular/common/http';
import { Observable, Subject } from 'rxjs';
import { Account } from 'src/app/models/account-model';
@Injectable({ providedIn: 'root' })
export class QuotationService {
private urlAPI: string = 'http://localhost:9095';
private quotationByManegerSource = new Subject<Account[]>();
public quotationByManeger$ = this.quotationByManegerSource.asObservable();
constructor(private http: HttpClient) { }
public getAccountsByName(managerName: string): Observable<Account[]> {
const url: string = `${this.urlAPI}/get-accounts-by-name/${managerName}`
return this.http.get<Account[]>(url)
}
}
从“@angular/core”导入{Injectable};
从'@angular/common/http'导入{HttpClient};
从“rxjs”导入{observeable,Subject};
从'src/app/models/accountmodel'导入{Account};
@可注射({providedIn:'root'})
出口类报价服务{
私有urlAPI:string=http://localhost:9095';
private quotationByManegerSource=新主题();
public quotationByManeger$=this.quotationByManegerSource.asObservable();
构造函数(私有http:HttpClient){}
公共getAccountsByName(managerName:string):可观察{
const url:string=`${this.urlAPI}/get accounts by name/${managerName}`
返回此.http.get(url)
}
}
我希望在选择名称时,将数据库中引用该名称的信息传递给另一个组件
并让第二个组件监听第一个组件中所做的更改。您可以在服务中创建一个主题
消息来源:主题代码>
并在构造函数中实例化
this.messageSource = new Subject<string>();
如果你想订阅,你可以
this.yourService.messageSource.asObservable().subscribe((value: string) => {
});
我在服务中创建了主题,但如何将数据库返回的值与该主题关联?我需要发出从数据库返回的值,然后在另一个组件中检索它。只需将该值设置为subjectIt类型冲突。我应该怎么做?冲突是什么?这里有一个stackblitz演示的示例
this.yourService.messageSource.asObservable().subscribe((value: string) => {
});