在父页面中访问内部子页面的公共变量

Question

你能告诉我如何在父页面中访问内部子页面的公共变量吗？即我需要访问这个变量offlineArticlesCount。

注意：以下所有 3 个组件都有自己的modules。

myPage.html - 父页面

 <picks *ngFor="let pick of pickData" [data]="pick"></picks>
 <p>{{instance.offlineArticlesCount}}</p> //How to do this?

myPage.ts

 @ViewChild(DownloadOfflineArticleComponent) instance: DownloadOfflineArticleComponent;

picks.html

<download-offline-article [data]="data" (onDownloadOfflineArticle)="downloadOfflineArticle($event)"></download-offline-article>

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 => { },
      () => { });
  }
    }

Answer 1

在您编辑问题以阐明组件层次结构后，我认为解决问题的最佳方法是使用共享服务在组件之间共享数据：

// 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);
},
//...

Answer 2

两个答案都是正确的，这取决于您想在哪里使用子组件中的该属性。

如果您只想在视图中显示它，您可以使用模板引用变量

<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}}

编辑

由于您拥有更复杂的组件层次结构，我认为解决此问题的最佳方法是使用共享服务，您可以在其中存储所有共享信息。这样一来，您就可以更轻松地从应用中的任何组件（或页面）访问这些数据。

Answer 3

只有一行：

@ViewChild(DownloadOfflineArticleComponent) childComp: DownloadOfflineArticleComponent;

然后使用{{ childComp?.offlineArticlesCount }}访问所有公共属性

Answer 4

使用模板引用变量：

<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>