为什么此路由不通过`page-router-outlet`路由？

我试图让一个组件具有一个由page-router-outlet访问的ActionBar和子组件。为什么此路由不通过`page-router-outlet`路由？

我父组件的HTML如下：

<ActionBar class="action-bar"> 
    <NavigationButton ios:visibility="collapsed" icon="res://menu" (tap)="onDrawerButtonTap()"></NavigationButton> 
    <ActionItem icon="res://navigation/menu" android:visibility="collapsed" (tap)="onDrawerButtonTap()" 
       ios.position="left"> 
    </ActionItem> 
    <Label class="action-bar-title" text="Example Text"></Label> 
</ActionBar> 

<RadSideDrawer #drawer showOverNavigation="true" [drawerTransition]="sideDrawerTransition"> 
    <StackLayout tkDrawerContent> 
     <MyDrawer [selectedPage]="'Settings'"></MyDrawer> 
    </StackLayout> 

    <StackLayout class="page page-content" tkMainContent> 
     <page-router-outlet></page-router-outlet> 
    </StackLayout> 
</RadSideDrawer>

我routing-module父组件的样子：

import {NgModule} from '@angular/core'; 
import {Routes} from '@angular/router'; 
import {NativeScriptRouterModule} from 'nativescript-angular/router'; 

import {HomeComponent} from './home.component'; 
import {DashboardComponent} from '../dashboard/dashboard.component'; 
import {Dashboard2Component} from '../dashboard2/dashboard.component'; 

const routes: Routes = [ 
    { 
    path: '', 
    component: HomeComponent, 
    children: [ 
     {path: '', component: DashboardComponent}, 
     {path: 'projects', component: Dashboard2Component}, 
    ] 
    } 
]; 

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

export const routedComponents = [ 
    HomeComponent 
];

然而，当我的路线/projects，它带给我的带新操作栏的新页面

我的理解是，这是因为page-router-outlet创建了一个新页面，据说我希望能够从一个子组件导回到以前的子组件。 {N}可能吗？

来源

2017-08-25 Crutchcorn

您可以尝试使用''而不是''...第一个不会创建一个新页面，只能替换当前内容中的内容... –

@AndersonIvanWitzke但是，如果我这样做，它不会允许我按后退按钮以访问上一页 – Crutchcorn

让你的应用程序作为组分的主模板......

app-template.component.html:

<ActionBar class="action-bar"> 
    <NavigationButton class="action-item" icon="res://ic_menu" (tap)="toggleDrawer()"></NavigationButton> 
    <StackLayout class="action-bar-title"> 
     <Label [text]="title"></Label> 
    </StackLayout> 
</ActionBar> 

<RadSideDrawer showOverNavigation="true"> 
    <ScrollView tkDrawerContent class="sidedrawer-center" tkDrawerClosed="onDrawerClosed" tkDrawerClosing="onDrawerClosing" tkDrawerOpened="onDrawerOpened" tkDrawerOpening="onDrawerOpening"> 
     <StackLayout> 
      <StackLayout class="sidedrawer-header"> 
       <Label text="blah blah blah" class="text-left text-capitalize font-weight-bold text-primary" textWrap="true"></Label> 
      </StackLayout> 

      <StackLayout class="sidedrawer-content"> 
       <GridLayout (tap)="closeDrawer()" nsRouterLinkActive="active" [nsRouterLinkActiveOptions]="{exact: true}" [nsRouterLink]="['/']" class="sidedrawer-list-item" pageTransition="fade" rows="auto" columns="auto, *"> 
        <Label class="sidedrawer-list-item-text" row="0" col="1" text="Home"></Label> 
       </GridLayout> 

       <GridLayout (tap)="closeDrawer()" nsRouterLinkActive="active" [nsRouterLink]="['/settings']" class="sidedrawer-list-item" pageTransition="fade" rows="auto" columns="auto, *"> 
        <Label class="sidedrawer-list-item-text" row="0" col="1" text="Settings"></Label> 
       </GridLayout> 

      </StackLayout> 
     </StackLayout> 
    </ScrollView> 

    <StackLayout tkMainContent class="page"> 
     <ng-content></ng-content> 
    </StackLayout> 
</RadSideDrawer>

app-template.component.ts:

import { Component, ViewChild, Input, OnInit } from "@angular/core"; 
import { RadSideDrawer, PushTransition } from "nativescript-telerik-ui/sidedrawer"; 
import { RadSideDrawerComponent } from "nativescript-telerik-ui/sidedrawer/angular"; 

@Component({ 
    selector: "app-template", 
    moduleId: module.id, 
    templateUrl: './app-template.component.html' 
}) 
export class AppTemplateComponent { 
    canToggleDrawer: boolean = true; 

    constructor() { } 

    @Input() title: string = 'MyApp'; 

    @ViewChild(RadSideDrawerComponent) drawerComponent: RadSideDrawerComponent; 
    drawer: RadSideDrawer; 

    ngOnInit() {} 

    ngAfterViewInit() { 
     this.drawer = this.drawerComponent.sideDrawer; 
     this.drawer.drawerTransition = new PushTransition(); 
    } 

    toggleDrawer() { 
     if (this.canToggleDrawer) { 
      this.drawer.toggleDrawerState(); 
     } 
    } 

    closeDrawer() { 
     this.drawer.closeDrawer(); 
    } 
}

那么你的孩子的意见，只是把它作为<app-template>，并把你的内容在里面。这样，您可以将抽屉菜单保留在一个文件中，并且仍然可以使用后退按钮...

来源

2017-08-25 20:10:48

为什么此路由不通过`page-router-outlet`路由？

回答

相关问题