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

Question

我有一项服务可以更改动态操作栏的标题，但是当我点击 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-->

Actionbar.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;
       });
    }

产品和详细信息page.ts

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

Answer 1

这完全是预料之中的，你有一个服务实例（我相信你已经将它注入到模块/根目录中），它只有一个 title$ (Observable) 实例，它的值在每个 ngOnInit.

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

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

Answer 2

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

actionBar.xml

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

actionBar.ts

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

产品和详情page.ts

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

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

BackButton clear Title of Actionbar in Native Script 6

nativescript

nativescript-angular

angular