Nativescript RadSideDrawer路由問題

試圖使用NativeScript RadSideDrawer用角本例中： https://gist.github.com/NathanWalker/e8f4f7c42af04fc725764a9867936e3d Nativescript RadSideDrawer路由問題

當我導航到路由/家庭/進料發生以下路由錯誤：

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>

來源

2017-06-07 Ryan Langton

不知道爲什麼你添加的'StackLayout'周圍的'在app.component HTML頁面路由器outlet'。它不應該被要求和實際上可能打破東西。 –

大概是在結構文件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

來源

2017-06-08 09:32:20 Alberto

Nativescript RadSideDrawer路由問題

回答

相關問題