Nativescript 6中的后退按钮清除操作栏的标题答案

【问题标题】：BackButton clear Title of Actionbar in Native Script 6Nativescript 6中的后退按钮清除操作栏的标题
【发布时间】：2019-08-06 16:04:50
【问题描述】：

我有一项服务可以更改动态操作栏的标题，但是当我点击 android 上的后退按钮时，当我返回时，它会保留新标题而不是旧标题：例如：产品 > 详细信息。当我再次回击它的详细信息而不是产品时；我在这里缺少什么？？

service.ts

import { Injectable, OnInit } from "@angular/core";
import { BehaviorSubject, Observable } from "rxjs/index";

@Injectable()
export class ActionBarService implements OnInit {

  // tslint:disable-next-line: ban-types
  private title = new BehaviorSubject<String>("ActionBar");
  private title$ = this.title.asObservable();

  constructor() {}


 ngOnInit() {
   this.getTitle();
 }

  // tslint:disable-next-line: ban-types
  setTitle(title: String) {
    this.title.next(title);
  }

  // tslint:disable-next-line: ban-types
  getTitle(): Observable<String> {
    return this.title$;
  }

}

操作栏 xml

<!--ACTION BAR-->
        <ActionBar class="action-bar roboto-regular">
                <NavigationButton icon="res://menu"  (tap)="openDrawer()" *ngIf="title !== 'Detail' " ></NavigationButton>
                <NavigationButton icon="res://back" (tap)="goBack()" *ngIf="title === 'Product ' " ></NavigationButton>
                <ActionItem ios.systemIcon="2" icon="res://shopping_black" ios.position="right"></ActionItem>
                <StackLayout orientation="horizontal" 
                    <Label class="action-bar-title" text="{{title}}" padding="10"></Label>
                </StackLayout>
        </ActionBar>
        <!--ACTION BAR-->

操作栏.ts

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

import { ActionBarService } from "../shared/action-bar-title";

@Component({
    selector: "actionbar-place",
    moduleId: module.id,
    templateUrl: "./actionbar.component.html",
    styleUrls: ["./actionbar.css"]
})
export class MarketPlaceComponent implements OnInit {

    title: any;

    constructor(private actionBarTitle: ActionBarService) {

    }

    ngOnInit() {
       this.actionBarTitle.getTitle().subscribe((appTitle) => {
       this.title = appTitle;
       });
    }

产品和详细信息页面.ts

 ngOnInit() {
      this.actionBarTitle.setTitle("My Title");
}

【问题讨论】：

Product 和 Detail 应该在 MarketPlaceComponent 内？还是将它们用作单独的屏幕？

标签： angular nativescript nativescript-angular

【解决方案1】：

这完全是意料之中的，你有一个服务实例（我相信你已经将它注入到模块/根目录中），它只有一个 title$ 实例（Observable），它的值在每个ngOnInit 上都会改变。

所以当你从 Product 导航到 Detail 时，在 Detail 组件上触发的ngOnInit 将使用 Detail 标题更新 Observable，同时前一个组件（Product）中的 ActionBar 也在监听更改并将更新它也有自己的标题。

我认为这是使用 Service 更新 ActionBar 标题的开销。您可以简单地从 ActionBar 公开 @Input 并在每次将其放入组件时设置标题。或者，如果您仍然喜欢使用 Service，则在组件级别将其标记为 Provider，这样每个组件都会有自己的实例，因此不会干扰其他组件。

【讨论】：

【解决方案2】：

通过执行@Manoj 建议的“@Input from ActionBar 并在每次将其放入组件时设置标题来解决。”

actionBar.xml

ActionBar [title]="MyTitle" backgroundColor="green" class="action-bar"></ActionBar>

actionBar.ts

export class ActionBarComponent{
@Input() MyTitle:string;
}

产品和详细信息页面.ts

<ab-component MyTitle="sample title">
...

【讨论】：