Question

在我的Ionic2项目中，我有三个选项卡的标签视图：

tabs.ts

<ion-navbar *navbar>
    <ion-title>My tab parent title</ion-title>
</ion-navbar>

<ion-tabs>
    <ion-tab [root]="tab1Root" tabIcon="people"></ion-tab>
    <ion-tab [root]="tab2Root" tabIcon="person"></ion-tab>
    <ion-tab [root]="tab3Root" tabIcon="globe"></ion-tab>
</ion-tabs>

有谁知道如何以编程方式从其中一个子标签更改此页面的ion-title？

Answer 1

我是这样做的：

<ion-header>
  <ion-navbar>
    <ion-title>{{title}}</ion-title>
  </ion-navbar>
</ion-header>
<ion-tabs>
  <ion-tab [root]="tabLogin" tabTitle="Login" tabIcon="log-in" (ionSelect)="this.title ='Login'"></ion-tab>
  <ion-tab [root]="tabSignup" tabTitle="Sign up" tabIcon="add-circle" (ionSelect)="this.title ='Sign up'"></ion-tab>
</ion-tabs>

Answer 2

请参阅我的回答here，了解如何使用提供程序在不同页面之间共享数据：在标签模板中使用存储在提供程序<ion-title>{{globalService.titleName}}</ion-title>中的变量，并在标签页中修改globalService.titleName

的值

在Ionic 2 beta 6中使用提供程序保存全局数据对我来说很有用，我相信它是Angular 2中推荐的做法。

从命令行生成提供程序：ionic g provider GlobalService请注意如何使用@Injectable

修饰生成的服务

在@App课程中注入您的服务;你通过在providers数组中声明它来做到这一点：

  @App({
        templateUrl: 'build/app.html',
              providers: [GlobalService] ,
              config: {} // http://ionicframework.com/docs/v2/api/config/Config/
            })

这将创建一个可在每个页面上访问的提供商的单个实例。无论您何时需要使用它，不在providers数组中声明，但在Page的构造函数中声明：

@Page({
        templateUrl: 'build/pages/new-page/new-page.html',
      })
      export class NewPage{

       constructor(public globalService: GlobalService) {
    }

    someFunction(){
    this.globalService.someGlobalFunction();
    }

Answer 3

导入应用并将其添加为构造函数

import { App } from 'ionic-angular';

 constructor(private app: App ) { }

然后在输入页面上添加事件处理程序

  ionViewDidEnter() {
    this.app.setTitle('people');
  }

Answer 4

其他答案都是很好的答案，发人深思，但官方推荐的在Ionic中设置文档标题的方法是使用Angular＆＃39; Title组件：< / p>

在app.module中：

import { Title }  from '@angular/platform-browser';

@NgModule({
...
  providers: [
    Title
  ],

其他地方：

import { Title }     from '@angular/platform-browser';

export class SomeComponent {
  public constructor(private titleService: Title ) { }

  public someMethod(){
    this.titleService.setTitle ('An Awesome Title');  
  }

参考：https://angular.io/guide/set-document-title

请注意@LeRoy的答案在技术上是正确的！即根据Ionic的官方文档，它应该完全工作！而且它曾经！但它已经不存在了！还有更多的是app.setTitle (not working) is a known issue in Ionic 2+，只能在框架的下一个主要版本（v4）中修复。

Answer 5

http://ionicframework.com/docs/v2/components/#tabs

您是否尝试在特定页面中创建离子导航栏

@Page({
  template: `
    <ion-navbar *navbar>
      <ion-title>Heart</ion-title>
    </ion-navbar>
    <ion-content>Tab 1</ion-content>`
})
class Tab1 {}

如何在Ionic2中以编程方式更改ion-title

5 个答案: