NativeScript-Angular -> App.component.ts 中的 ActionBar 在路由改变时不一致答案

【问题标题】：NativeScript-Angular -> ActionBar in app.component.ts is not consistent when the route changesNativeScript-Angular -> App.component.ts 中的 ActionBar 在路由改变时不一致
【发布时间】：2017-06-15 10:42:01
【问题描述】：

这是 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 吗？

【问题讨论】：

标签： angular nativescript angular2-nativescript angular-router

【解决方案1】：

我相信，如果您使用<router-outlet></router-outlet> 而不是<page-router-outlet></page-router-outlet>，您将获得预期的结果。

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

【讨论】：

但是当从项目列表（初始页面）预置项目但正在初始化时，项目详细信息组件未呈现。并且硬件后退按钮不起作用。

【解决方案2】：

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

将关注添加到 main.ts

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

nativescript 有 changelog 自述文件。

【讨论】：

【解决方案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 {

}

【讨论】：

这对我不起作用。当路由更改时，ActionBar 更改为 ``` ``` 请注意，新路由中的操作项会丢失。我没有在新路由模板中使用 ActionBar。但是里面的ActionItem却丢失了。
路由发生变化时可能有一个属性没有被清除。你能分享你的组件、html和服务吗？
这是我的 github repo 网址。请参阅文件 init。 github.com/bunnyvishal6/example-nativescript-app