如何访问 Angular 中未初始化组件的属性？

Question

我不知道如何使用 Ionic 框架教程模板在 Angular 中访问组件的属性。它似乎未初始化，因为我试图将其打印到控制台。这是 app.component.ts 中的代码：

export class MyApp {
  @ViewChild(Nav) nav: Nav;

  pages: Array<{title: string, badge: number, component: any}>;

  constructor(
    public platform: Platform,
    public menu: MenuController,
    public statusBar: StatusBar,
    public splashScreen: SplashScreen,
    public authService: AuthService,
    public loadingCtrl: LoadingController,
    private toastCtrl: ToastController
  ) {
   this.initializeApp();

   // set our app's pages
   this.pages = [
     { title: 'Series', badge: 0, component: SeriesDetailPage },
     { title: 'Borrow', badge: 0, component: BorrowViewPage },
     { title: 'Request', badge: 0, component: RequestViewPage },
     { title: 'Borrow List', badge: 0, component: BorrowListPage },
     { title: 'Request List', badge: 0, component: RequestListPage },
     { title: 'Setting', badge: 0, component: SettingPage }
   ];

   var borrowPage = this.pages.find(page => page.title === 'Borrow');
   console.log((borrowPage.component as BorrowViewPage).items); //Print undefined
   this.nav.setRoot(BorrowViewPage);
  }
  ...
  openPage(page) {
    // close the menu when clicking a link from the menu
    this.menu.close();
    // navigate to the new page if it is not the current page
    this.nav.setRoot(page.component);
  }

这是 BorrowViewPage 组件的代码：

export class BorrowViewPage {
  public items: Borrow[];

  constructor(public navCtrl: NavController, public authService: AuthService, public navParams: NavParams) {
    this.view(); //Make a HTTP call to initialize items array
  }
}

此时似乎没有任何组件调用其构造函数。如果可以，是否可以手动调用组件构造函数？

添加： 神奇的是我什至不知道类实例来自哪里。这是应用从 app.module.ts 开始的地方：

@NgModule({
  declarations: [
    MyApp,
    SettingPage,
    SeriesDetailPage,
    SeriesListPage,
    BorrowListPage,
    BorrowViewPage,
    RequestListPage,
    RequestViewPage
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    SettingPage,
    SeriesDetailPage,
    SeriesListPage,
    BorrowListPage,
    BorrowViewPage,
    RequestListPage,
    RequestViewPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    AuthService
  ]
})
export class AppModule {}

通过在 app.component.ts 中将根页面设置为您想要的任何页面，该组件名称的构造函数将被调用。我认为构造函数被调用了？！没有把握。当我单击 app.html 中指定的任何按钮时，它的工作方式相同：

<ion-menu [content]="content">

  <ion-header>
    <ion-toolbar>
      <ion-title>MyApp</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <button ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{p.title}}
        <ng-container *ngIf="p.badge != 0">
            <span class="badge badge-assertive">{{p.badge}}</span>
        </ng-container>
      </button>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

在这种情况下，我什至如何检索该类实例？

Answer 1

在这里更新我的答案，因为我意识到我刚刚得出结论（因为你有异步调用，数据还不可用，因此结果是'未定义'）。

现在，当我仔细观察时，我意识到您正在尝试做的事情（从父范围 (MyApp) 访问子组件 (BorrowViewPage) 数据/属性）不是传统的，也不是 Angular 希望您这样做的方式：@987654321 @

我认为在你的用例中你应该考虑这个交互模型：https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service

这里的理由是，在您的情况下，两个组件（MyApp 和 BorrowViewPage）都需要访问相同的数据，理想情况下这些数据应该在“基础”或“共享”服务中可用。

服务应该被初始化并导入/注入到每个组件中，这样你就可以得到更简洁的设计：

将您的 http 调用移至提供程序并让组件调用/订阅它们也是一种更好的做法。所以我认为你可以通过这种方式获得更清晰的实现。

如果您有理由仍然希望使用当前方法实现某些目标并且规范方法（共享服务）不适合 - 请分享这些原因。