Question

我无法弄清楚如何使用Ionic Framework教程模板访问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希望您这样做的：{{ 3}}

我认为在您的用例中，您应该考虑以下交互模型：https://angular.io/guide/component-interaction#component-interaction

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

应该初始化服务并将其导入/注入到每个组件中，这样您才能获得更简洁的设计：

https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service

将http调用移至提供程序并让组件调用/订阅它们也是一种更好的做法。因此，我认为您可以通过这种方式实现更简洁的实施。

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

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

1 个答案: