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

只需一行：

@ViewChild(DownloadOfflineArticleComponent) childComp: DownloadOfflineArticleComponent;

然后使用{{ childComp?.offlineArticlesCount }}

访问所有公共媒体资源

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

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

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

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

4 个答案: