你能告诉我如何在父页面中访问内部子页面的公共变量吗？即我需要offlineArticlesCount访问这个变量。
注意：以下所有 3 个组件都有自己的modules。
我的页面.html- 父页面
<picks *ngFor="let pick of pickData" [data]="pick"></picks>
<p>{{instance.offlineArticlesCount}}</p> //How to do this?
我的页面
@ViewChild(DownloadOfflineArticleComponent) instance: DownloadOfflineArticleComponent;
选择.html
<download-offline-article [data]="data" (onDownloadOfflineArticle)="downloadOfflineArticle($event)"></download-offline-article>
下载-离线-文章.ts- 内在子组件
export class DownloadOfflineArticleComponent {
offlineArticlesCount: number = 0;
constructor(){}
downloadOfflineArticle() {
this.articleService.downloadOfflineArticle(this.data.id)
.subscribe((res: any) => {
this.onDownloadOfflineArticle.emit(true);
this.localCacheService.clearMyLibraryPageCacheGroup().then(() => {
this.getAllMyPurchasedOfflineArticles().subscribe((res: any) => {
this.offlineArticlesCount = res.count;//here is the place where it updates
},
error => { },
() => { });
});
},
error => { },
() => { });
}
}
两个答案都是正确的，这只取决于您要在子组件中的何处使用该属性。
如果只想在视图中显示它，可以使用 模板引用变量
<picks *ngFor="let pick of pickData" [data]="pick"></picks>
<p>{{ offlineArticle.offlineArticlesCount }}</p>
<download-offline-article #offlineArticle ..."></download-offline-article>
这样，您就不会在父组件代码中创建子组件的实例。
如果要在组件代码中使用该属性，最好的方法是使用ViewChild获取子组件的实例：
// Parent component code...
@ViewChild(DownloadOfflineArticleComponent) childComponent: DownloadOfflineArticleComponent;
当然，您可以在视图中使用它，如下所示：
<!-- Your view -->
{{ childComponent?. offlineArticlesCount}}
编辑
由于您有一个更复杂的组件层次结构，我认为解决此问题的最佳方法是使用共享服务，您可以在其中存储所有共享信息。这样，您就可以更轻松地从应用的任何组件(或页面(访问该数据。
只有一行：
@ViewChild(DownloadOfflineArticleComponent) childComp: DownloadOfflineArticleComponent;
然后使用{{ childComp?.offlineArticlesCount }}访问所有公共属性
在编辑问题以阐明组件层次结构后，我认为解决问题的最佳方法是使用共享服务在组件之间共享数据：
// Create the shared service like below:
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs';
@Injectable()
export class SharedService {
private articleCountSubject: BehaviorSubject<any> = new BehaviorSubject({});
setArticleCount(count: any): void {
this.articleCountSubject.next(count);
}
getArticleCount(): Observable<any> {
return this.articleCountSubject.asObservable();
}
}
// myPage.ts:
constructor(private sharedService: SharedService){}
ngOnInit() {
this.sharedService.getArticleCount().subscribe(count=> {
this.offlineArticlesCount = count;
});
}
// myPage.html:
<picks *ngFor="let pick of pickData" [data]="pick"></picks>
<p> {{offlineArticlesCount }} </p>
// download-offline-article.ts:
//...
this.getAllMyPurchasedOfflineArticles().subscribe((res: any) => {
this.sharedService.setArticleCount(res.count);
},
//...
使用模板引用变量：
<picks *ngFor="let pick of pickData" [data]="pick"></picks>
<p>{{ offlineArticle.offlineArticlesCount }}</p>
<download-offline-article #offlineArticle [data]="data" (onDownloadOfflineArticle)="downloadOfflineArticle($event)"></download-offline-article>