2

{N} で a がどのように実装されているかを示す公式のアプリの例に従います。<router-outlet>私のアプリの唯一の違いは、モーダル ページ内で使用したいということです。ただし<router-outlet>、モーダル内の要素の代わりに、コンテンツを新しいページとして読み込みます。

モーダル コンポーネント

...
@Component({
    selector: "modal",
    template: `
        <StackLayout>
            <StackLayout>
                <Button text="First" [nsRouterLink]="['/first']"></Button>
                <Button text="Second" [nsRouterLink]="['/second']"></Button>
            </StackLayout>

            <router-outlet></router-outlet>
        </StackLayout>
    `
})
export class ModalComponent {
    constructor(private page:Page, public params:ModalDialogParams) {
        // ..
    }
}

app.routing.ts

...
export const routes:Routes = [
    { path: "", redirectTo: "home", pathMatch: "full" },
    { path: "home", component: HomeComponent },
    { path: "modal", component: ModalComponent },
    { path: "first", component: FirstComponent },
    { path: "second", component: SecondComponent }
];

export const dynamicComponents = [
    ModalComponent,
    FirstComponent,
    SecondComponent
];
...

app.module.ts

...
@NgModule({
    imports: [
        NativeScriptModule,
        NativeScriptFormsModule,
        NativeScriptHttpModule,
        NativeScriptRouterModule,
        NativeScriptRouterModule.forRoot(routes)
    ],
    declarations: [
        AppComponent,
        HomeComponent,
        ...dynamicComponents
    ],
    entryComponents: [
        ...dynamicComponents
    ],
    bootstrap: [AppComponent]
})
export class AppModule {}

モーダルのルーターアウトレットにロードする代わりに、新しいページに移動する/first理由は何ですか?/second

更新：

これはバグのようです。以下の私の答えを見てください。

4

3 に答える 3