Question

在离子（3.20）中，如果您使用带有ionic start myApp sidemenu的侧面菜单模板启动应用程序，则最终会有两个页面（列表和主页）。每个页面模板都包含一个包含ion-navbar的ion-header。这意味着需要对每个页面单独进行导航栏的更改。我正在将其移至app.html模板，因此导航栏随处可见。这就是我的app.html的样子：

<ion-menu [content]="content">
  <ion-header>
    <ion-toolbar color="primary">
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>

</ion-menu>

<ion-header>
  <ion-navbar color="primary">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>{{pagetitle}}</ion-title>
  </ion-navbar>
</ion-header>

<ion-nav [root]="rootPage" #content swipeBackEnabled="flase"></ion-nav>

现在我遇到的问题是pagetitle属性。每个页面都会定义此属性，但如何从app.html模板访问它？

现在我的页面/ home / home.ts看起来像这样（在这种情况下FieldService无关紧要）：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { FieldService } from '../../app/field.service';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  providers: [FieldService]
})
export class HomePage {
  fields: any[];
  pagetitle: string;

  constructor(public navCtrl: NavController, service: FieldService) {
    this.fields = service.getFields();
    this.pagetitle = "Home";
  }

}

但是使用此设置，页面标题不会出现在实际页面中。我想在app.html页面中的组件属性＆＃34; pagetitle＆＃34;不可用。

Answer 1

<方法1

您可以在AppComponent内收听网址更改，并根据网址设置网页标题。

在你的构造函数

中

constructor(private router: Router) {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
         if(event.url.matches('home')){
             this.pagetitle = 'Home';
         }else if(event.url.matches('somethingElse')){
             this.pagetitle = 'Something else';
         }
      }
    });
  }

<方法2

另一种方法是创建共享服务，在那里设置页面标题，并在离子菜单中使用它。

@Injectable()
export class HeaderService {
  pagetitle: string;
  constructor() { }
}

然后在AppComponent中使用它

constructor(public headerService: HeaderService) { //must be public!
}

并在您的HTML中而不是写{{pagetitle}}，写{{headerService.pagetitle}}

然后在HomePage和其他组件中设置页面标题。

export class HomePage {
  fields: any[];
  pagetitle: string;

  constructor(public navCtrl: NavController, service: FieldService, private headerService: HeaderService) {
    this.fields = service.getFields();
    this.headerService.pagetitle = "Home";
  }

}

注意：代码未经过测试

如何在app.html模板中访问pagetitle Component属性

1 个答案: