angular - 当路由改变时，app.component.ts 中的 NativeScript-Angular -> ActionBar 不一致

Question

这是 app.component.html

    <ActionBar title="NewApp" class="action-bar font-awesome">
        <ActionItem (tap)="toggleDrawer()" ios.position="left">
            <Button text="&#xf039;" class="font-awesome" id="menu-btn"></Button>
        </ActionItem>
    </ActionBar>

    <page-router-outlet></page-router-outlet>

当路线更改时，操作栏会更改为其他内容。我不能在 app.component.ts 中使用 ActionBar 吗？

Answer 1

我相信如果你使用<router-outlet></router-outlet>而不是<page-router-outlet></page-router-outlet>你会得到你期望的结果。

<page-router-outlet></page-router-outlet>替换整个页面，<router-outlet></router-outlet>只会替换内容块

Answer 2

https://github.com/NativeScript/nativescript-angular/issues/1441#issuecomment-434132592

将以下内容添加到 main.ts

 platformNativeScript({ createFrameOnBootstrap: true})
 .bootstrapModuleFactory(AppModuleNgFactory);

nativescript 有 changelog 自述文件。

Answer 3

是的，您可以在 app.component.ts 中使用 ActionBar

这是一个基本示例：

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

@Component({
  selector: "my-app",
  template: `
  <ActionBar title="Glossary" class="action-bar"></ActionBar>
  <page-router-outlet></page-router-outlet>`,
  styleUrls: ["app.component.css"]
})

export class AppComponent {

}