Nie mogę dowiedzieć się, jak uzyskać dostęp do właściwości składnika w Angular przy użyciu szablonu samouczka Ionic Framework. Wydaje się, że jest niezainicjowany, ponieważ próbowałem go wydrukować na konsoli. Oto kod w 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);
  }

Oto kod komponentu 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
  }
}

Wydaje się, że żaden z komponentów nie ma w tym momencie wywołanego konstruktora. Jeśli tak, to czy można ręcznie wywołać konstruktora komponentu?

DODANO: Jakie jest magiczne to, że nawet nie wiem, skąd pochodzi instancja klasy. Oto, gdzie aplikacja zaczyna się na 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 {}

Ustawiając stronę główną na dowolną stronę w app.component.ts, zostanie wywołany konstruktor tej nazwy komponentu. Myślę, że wtedy nazywa się konstruktor?! Niepewny. Działa to w ten sam sposób, gdy klikam dowolny z przycisków określonych w 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>

Jak w tym przypadku mogę nawet pobrać tę instancję klasy?

1
Ice Drake 8 listopad 2018, 05:08

1 odpowiedź

Najlepsza odpowiedź

Aktualizuję tutaj moją odpowiedź, ponieważ zdałem sobie sprawę, że właśnie wyszedłem do wniosku (że ponieważ masz wywołanie asynchroniczne, dane nie są jeszcze dostępne, a zatem wynik jest „niezdefiniowany”).

Teraz, gdy przyjrzałem się bliżej, zdaję sobie sprawę, że to, co próbujesz zrobić (uzyskać dostęp do danych/właściwości komponentu potomnego (BorrowViewPage) z zakresu nadrzędnego (MyApp)) nie jest konwencjonalne i nie jest takie, jak chce tego Angular: https://angular.io/guide/component-interaction#component-interaction

Myślę, że w swoim przypadku użycia powinieneś rozważyć ten model interakcji:https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service

Uzasadnieniem jest to, że w twoim przypadku oba komponenty (MyApp i BorrowViewPage) wymagają dostępu do tych samych danych, które idealnie powinny być dostępne w usłudze "podstawowej" lub "wspólnej".

Usługa powinna zostać zainicjowana i zaimportowana/wstrzyknięta do każdego z komponentów, dzięki czemu uzyskasz czystszy projekt:

enter image description here

Lepszą praktyką jest również przeniesienie wywołań http do dostawcy i wywoływanie/subskrybowanie ich przez komponenty. Myślę więc, że w ten sposób można uzyskać czystszą implementację.

Jeśli masz powód, dla którego nadal chcesz coś osiągnąć przy obecnym podejściu, a podejście kanoniczne (usługa wspólna) nie jest odpowiednie - podziel się tymi powodami.

0
Sergey Rudenko 10 listopad 2018, 03:57