nativescript - Nativescript + angular：升级到 8.2.0 后选项卡视图上的空白页没有任何错误

Question

环境 - CLI：6.0.3 - 跨平台模块：6.0.0 - Android 运行时：6.0.2 - iOS 运行时：6.0.2 - 插件： - NativeScript-Angular：8.2.0 - Angular：8.2.0

升级到最新的 cli 和 nativescript-angular 后，当我启动应用程序时，我得到一个空白屏幕，该应用程序基于打开页面选项卡但是当我尝试使用组件 ts 文件输出某些内容时，我可以在控制台上得到它，问题只是在模板级别（我得到空白页）。

这是我的 app.modules.ts 文件：

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { CoreModule } from "./core/core.module";
import { SharedModule } from "./shared/shared.module";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { NativeScriptCommonModule } from "nativescript-angular/common";
import { TNSImageModule } from 'nativescript-image/angular';
import * as applicationModule from "tns-core-modules/application";
import * as imageModule  from "nativescript-image";
declare var GMSServices: any;
if (applicationModule.android) {
  applicationModule.on(applicationModule.launchEvent, () => {
    console.log('initialize pipeline');
    imageModule.initialize();
  });
} else {
  GMSServices.provideAPIKey("*********");
}

// Uncomment and add to NgModule imports if you need to use two-way binding
// import { NativeScriptFormsModule } from "nativescript-angular/forms";

// Uncomment and add to NgModule imports if you need to use the HttpClient wrapper
// import { NativeScriptHttpClientModule } from "nativescript-angular/http-client";

@NgModule({
  bootstrap: [AppComponent],
  imports: [NativeScriptCommonModule, CoreModule, SharedModule, TNSImageModule, AppRoutingModule],
  declarations: [AppComponent],
  providers: [],
  schemas: [NO_ERRORS_SCHEMA]
})
/*
Pass your application module to the bootstrapModule function located in main.ts to start your app
*/
export class AppModule {}

这是 app-routing.modules.ts

import { NgModule } from "@angular/core";
import { NativeScriptRouterModule } from "nativescript-angular/router";
//import { hasKey } from "tns-core-modules/application-settings";
import { Routes } from "@angular/router";
//const homePath = (hasKey('skipLoginScreen') ? 'home/tabs':'auth/login');

const routes: Routes = [
  {
    path: "",
    redirectTo: "home",
    pathMatch: "full"
  },
  {
    path: "home",
    loadChildren: "~/app/home/home.module#HomeModule"
  },
  {
    path: "products",
    loadChildren: "~/app/products/products.module#ProductsModule"
  },
  {
    path: "auth",
    loadChildren: "~/app/auth/auth.module#AuthModule"
  },
  {
    path: "account",
    loadChildren: "~/app/account/account.module#AccountModule"
  },
  {
    path: "cart",
    loadChildren: "~/app/cart/cart.module#CartModule"
  }
];

@NgModule({
  imports: [NativeScriptRouterModule.forRoot(routes, { enableTracing: true } )],
  exports: [NativeScriptRouterModule]
})
export class AppRoutingModule {}

这是我的 home-routing.module.ts：

import { NgModule } from "@angular/core";
import { Routes } from "@angular/router";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { TabsComponent } from "./tabs.component";
import { HomeComponent } from "./home-tab/home.component";
import { CategoriesComponent } from "./categories-tab/categories.component";
import { InfoComponent } from "./info-tab/info.component";
import { LocationsComponent } from "./locations-tab/locations.component";
import { AccountComponent } from "./account-tab/account.component";

export const COMPONENTS = [TabsComponent, HomeComponent, CategoriesComponent, InfoComponent, LocationsComponent, AccountComponent];

const routes: Routes = [
  {
    path: "",
    redirectTo: "tabs",
    pathMatch: "full"
  },
  {
    path: "tabs",
    component: TabsComponent,
    children: [{ path: "home", component: HomeComponent, outlet: "homeTab" }, { path: "categories", component: CategoriesComponent, outlet: "categoriesTab" }, { path: "info", component: InfoComponent, outlet: "infoTab" }, { path: "locations", component: LocationsComponent, outlet: "locationsTab" }, { path: "account", component: AccountComponent, outlet: "accountTab" }]
  }
];

@NgModule({
  imports: [NativeScriptRouterModule.forChild(routes)],
  exports: [NativeScriptRouterModule]
})
export class HomeRoutingModule {}

这是我的 home.module.ts：

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { HomeRoutingModule, COMPONENTS } from "./home-routing.module";
import { SharedModule } from "../shared/shared.module";
import { PushNotificationsService } from './../core/services/push-notifications.service';
// Uncomment and add to NgModule imports if you need to use two-way binding
// import { NativeScriptFormsModule } from "nativescript-angular/forms";

// Uncomment and add to NgModule imports if you need to use the HttpClient wrapper
// import { NativeScriptHttpClientModule } from "nativescript-angular/http-client";

@NgModule({
  imports: [SharedModule, HomeRoutingModule],
  providers: [PushNotificationsService],
  declarations: [...COMPONENTS],
  schemas: [NO_ERRORS_SCHEMA]
})
/*
Pass your application module to the bootstrapModule function located in main.ts to start your app
*/
export class HomeModule {}

这是我的 tabs.component.ts：

import { Component, OnInit } from "@angular/core";
import { Page } from "tns-core-modules/ui/page";
import { RouterExtensions } from "nativescript-angular/router";
import { DataService } from "../core/services/data.service";
import { ActivatedRoute } from "@angular/router";

@Component({
  selector: "tabs",
  moduleId: module.id,
  templateUrl: "./tabs.component.html"
})
export class TabsComponent implements OnInit {
  selectedIndex: number = 4;
  constructor(private page: Page, private activeRoute: ActivatedRoute, private dataService: DataService, private routerExt: RouterExtensions) {}

  ngOnInit(): void {
    this.page.actionBarHidden = true;
    this.routerExt.navigate([{ outlets: { homeTab: ["home"], infoTab: ["info"], categoriesTab: ["categories"], accountTab: ["account"], locationsTab: ["locations"] } }], { relativeTo: this.activeRoute });
    this.dataService.getActivatedTab().subscribe(index => {
      this.selectedIndex = index;
    });
  }
  onTabChanged(args) {
    setTimeout(() => {
      this.dataService.setActivatedTab(args.newIndex);
    }, 30);
  }
}

标签： nativescriptangular2-nativescriptangular-nativescript