Question

所以我有一个包含多个组件的Angular应用。

其中一个组件是导航栏，由用户和管理员下拉菜单组成。

如何更新主视图（正文）以动态XHR GET加载另一个URL？我的XHR GET代码已使用HttpClient完成。 <div [innerHtml]="dashboardData"></div>显然无效。

这是我的XHR代码的示例：

fetchDashboard() {


    const requestOptions: object = {
      // tslint:disable-next-line: max-line-length
      headers: new HttpHeaders().append('Authorization', 'Bearer Tokenhere'),
      responseType: 'text'
    };
    this.http.get<string>('http://localhost:3000/dashboard',
        requestOptions)
            .subscribe(response => {
                   console.log(response);
                   // this should get used to update the view
                   this.dashboardData = response;
            }
    );
}

我得到了this的推荐，但我不知道如何在我的用例中实现它。

Similar question，但我的问题需要其他解决方案。

Answer 1

您可以使用RxJS Subject或BehaviorSubject创建服务以在视图之间共享数据。

例如

your.service.ts

@Injectable()
export class MyService {

  private sharedSubject$ = new BehaviorSubject<YourDataType>(<YourDataType>{})


  public shareData(data: YourDataType): void {
    this.sharedSubject$.next(data);
  }

  public getSharedData(): Observable<YourDataType> {
    return this.sharedSubject$.asObservable()
  }

}

在您的方法fetchDashboard()内执行以下操作：

fetchDashboard() {
 ...

  this.http.get<string>('http://localhost:3000/dashboard',
        requestOptions)
            .subscribe(response => {
                   console.log(response);
                   // this should get used to update the view
                   this.dashboardData = response;
                   this.yourShareService.shareData(response);
            }
    );

}

在其他组件中，只需使用getSharedData()进行订阅，并在数据更新后立即更新视图。

对于组件内部的订阅，您可以执行以下操作：

this.yourSharedService.getSharedData().subscribe(data => { this.dashboardData = data; })

Answer 2

看看这个Stack Blitz Link

您的Json结构是...

import matplotlib.pyplot as plt
from sklearn import datasets
from sklearn.model_selection import train_test_split
from sklearn.preprocessing import MinMaxScaler
from sklearn.svm import SVC

data = datasets.load_iris()
X = data.data
y = data.target

X_train, X_test, y_train, y_test = train_test_split(X, y, test_size=0.3, random_state=0)

scaler = MinMaxScaler()
X_train_scaled = scaler.fit_transform(X_train) # fit it on the training data

model = SVC()
model.fit(X_train_scaled, y_train)

X_test_scaled = scaler.transform(X_test) # apply it on the test data
y_pred = model.predict(X_test_scaled) # model prediction on the scaled test set

您的getData（）..

[
  {"id":1,"name":"Pencil"}, 
  {"id":2,"name":"Pen"}
]

您的主题是...

getData(){
  return this.httpClient.get('/assets/data.json') .pipe(
   tap (data => this.data$.next(data))
  )
}

您的ngOnInit（）是...

  private data$ : Subject <any> = new Subject <any>();

在这里，首先使用http.get（）将默认数据与json的两个数据一起加载，然后您必须单击sendData按钮，然后将this.data $ observable设置为新数据，然后通过订阅将这些数据添加到组件中可以通过ngOnInit（）方法来实现。

处理多个视图时如何更新某个组件的视图？

2 个答案: