为什么这条路线不通过`page-router-outlet`路由？

Question

我正在尝试拥有一个由page-router-outlet访问的ActionBar和子组件的组件。

我的父组件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}吗？

Answer 1

将您应用的主模板作为组件...

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>并将您的内容放入其中。这样，您可以将抽屉菜单仅保留在一个文件中，并且仍然可以使用后退按钮...