Nativescript RadSideDrawer 路由问题答案

【问题标题】：Nativescript RadSideDrawer routing issueNativescript RadSideDrawer 路由问题
【发布时间】：2017-06-07 00:31:13
【问题描述】：

尝试使用带有角度的 NativeScript RadSideDrawer 使用此示例： https://gist.github.com/NathanWalker/e8f4f7c42af04fc725764a9867936e3d

当我导航到路由 /home/feed 时出现以下路由错误：

JS: Unhandled Promise rejection: Cannot find primary outlet to load 'FeedComponent' ; Zone: <root> ; 
Task: Promise.then ; Value: Error: Cannot find primary outlet to load 'FeedComponent' Error: Cannot find primary outlet to load 'FeedComponent'

不使用侧抽屉的路由（IE 没有“家”父级）工作正常。

app.component.ts（根组件）

import { Component } from '@angular/core';

@Component({
  selector: 'ppc-app',
  template: '<StackLayout><page-router-outlet></page-router-outlet></StackLayout>',
  styleUrls: []
})
export class AppComponent {}

app.routes.ts

export const routes = [
  { path: 'home', component: HomeComponent,
    children: [
      { path: 'feed', component: FeedComponent }  <-- this route fails
    ]
  },
  { path: 'login', children: [
    { path: '', component: LoginComponent },  <-- these routes work
    { path: 'type', component: ChooseTypeComponent }  <-- these routes work
  ]}
];

home.component.ts

<ActionBar title="Plant Powered Community">
  <ActionItem (tap)="toggle()">
    <!-- example: using font-awesome for hamburger menu but you can use whatever you'd like -->
    <Button class="fa" text="&#xf0c9;"></Button> 
    <!-- however in your project, would be easier to use this plugin: https://github.com/NathanWalker/nativescript-fonticon -->
  </ActionItem>
</ActionBar>
<RadSideDrawer #drawer [transition]="sideDrawerTransition" selectionBehavior="None">
  <StackLayout tkDrawerContent>
    <!-- anything you want in drawer -->
    <!-- for example: -->
    <!-- you want options {exact: true} on the first one because otherwise it would be considered active when 'Other Page' in active as well -->
    <Button text="Home" [nsRouterLink]="['/home']" nsRouterLinkActive="active" [nsRouterLinkActiveOptions]="{exact:true}"></Button>
    <Button text="Other Page" [nsRouterLink]="['/home/otherPath']" nsRouterLinkActive="active"></Button>
  </StackLayout>
  <StackLayout tkMainContent>
    <router-outlet></router-outlet>
  </StackLayout>
</RadSideDrawer>

【问题讨论】：

不知道为什么您在 app.component HTML 中的 page-router-outlet 周围添加了 StackLayout。它不应该是必需的，实际上可能会破坏。

标签： angular nativescript angular-routing

【解决方案1】：

可能是文件app.routes.ts中的结构

export const APP_ROUTES: Routes = [
{
    path: '',
    redirectTo: '/home/feed',
    pathMatch: 'full'
},
{
    path: "home",
    component: HomeComponent,
        children: [
            {path: "login", component: LoginComponent},
            {path: 'type', component: ChooseTypeComponent },
            {path: 'feed', component: FeedComponent }
        ]
},

];

我创建了一个简单的 RadSideDrawer 示例，看看是否有帮助。

https://github.com/simonettoa/nativescript-RadSideDrawer

【讨论】：