page-router-outlet 在我的 nativescript-ng2-magic 项目中不起作用

Question

我想为 web 和 android 创建一个应用程序： https://github.com/NathanWalker/nativescript-ng2-magic。 我创建了 2 个组件 HomePageComponent 和 AddPageComponent 但这段代码似乎在我的 app.component.tns.html 中不起作用：

<page-router-outlet></page-router-outlet>

它应该显示我的 homepage.component.tns.html 中的内容：

<ActionBar title="Home Page"></ActionBar>

这是我的 app.routing.ts 中的代码

import {HomePageComponent} from "./components/homepage/homepage.component";
import {AddPageComponent} from "./components/addpage/addpage.component";

export const AppRoutes: any= [
   {path:'', component: HomePageComponent},
   {path:'addpage', component: AddPageComponent}
];

export const AppComponents: any = [
   HomePageComponent,
   AddPageComponent
];

以及 app.module.ts 的代码：

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/platform";
import {AppRoutes, AppComponents} from "./app.routing";
import {NativeScriptRouterModule} from "nativescript-angular/router";
import {NativeScriptFormsModule} from "nativescript-angular/forms"

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent, ...AppComponents],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    NativeScriptModule,
      NativeScriptFormsModule,
      NativeScriptRouterModule,
      NativeScriptRouterModule.forRoot(AppRoutes)
  ],
  schemas: [NO_ERRORS_SCHEMA],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

用布局容器包装<page-router-outlet></page-router-outlet> 非常重要，所以试试这个：

<StackLayout>
  <page-router-outlet></page-router-outlet>
</StackLayout>

也可以尝试将其添加到您的 HomeComponent 以查看它：

<ActionBar title="Home Page"></ActionBar>
<StackLayout>
  <Label text="Home"></Label>
</StackLayout>

2016 年 12 月 11 日编辑：

您的导入顺序可能是罪魁祸首。您希望首先导入 {N} 平台；还可以尝试在你的包中使用nativescript-angular 的next 标签（注意next 标签，导入位置更改为从同一个桶中全部导入），然后再次清除node_modules，平台（rm -rf node_modules platforms）并重新安装。另外，您不想使用其他角度导入，因此请尝试更新为：

import { 
  NativeScriptModule,
  NativeScriptFormsModule, 
  NativeScriptHttpModule, 
  NativeScriptRouterModule 
} from "nativescript-angular";
import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { AppRoutes, AppComponents } from "./app.routing";
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent, ...AppComponents],
  imports: [
    NativeScriptModule,
    NativeScriptFormsModule,
    NativeScriptHttpModule,
    NativeScriptRouterModule.forRoot(AppRoutes)
  ],
  schemas: [NO_ERRORS_SCHEMA],
  bootstrap: [AppComponent]
})
export class AppModule { }