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) 并重新安装。另外，您不想使用其他 angular 导入，因此请尝试更新为：

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 { }

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

page-router-outlet not working in my nativescript-ng2-magic project

android

nativescript

angular2-routing

angular