将样式添加到活动标题 - Ionic 3 / Angular 5

Question

当用户在当前页面上时，我希望页面的标题加下划线或文本更改颜色 - 显示用户在该页面上的任何内容。我目前正在使用延迟加载作为从一个页面到另一个页面的一种方式 - 使用这个我必须使用每个页面的模块，我正在使用标题的组件。问题是如何从组件中找出用户所在的页面。

了header.html

<ion-header>

    <ion-navbar>
      <button ion-button menuToggle>
        <ion-icon name="menu"></ion-icon>
      </button>

    </ion-navbar>
    <div>

      <div (click)="openPageOne()">
        <h2>Page One</h2>
      </div>

      <div (click)="openPageTwo()">
        <h2>PageTwo</h2>
      </div>

    </div>
</ion-header>

APP-header.ts

openPageOne() {
    this.nav.push(pageOne);
  }

  openPageTwo() {
    this.nav.push(pageTwo);
  }

然后我将app-header放入组件模块，然后将该模块导入我的页面模块。一旦它在那里，我可以将标题标记放在页面html中

Answer 1

您好，您可以使用标头组件作为子组件和@input，

了header.html

<ion-header>
  <ion-navbar color="{{header_info.headerColor}}">
  <button ion-button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title color="{{header_info.fontColor}}">
    {{header_info.title}}
  </ion-title>
</ion-navbar>
</ion-header>

在header.component.ts中使用输入装饰器

export class HeaderPage {
  @Input() header_info: {};
}

从父组件页面，您可以传递或设置header_info。从这里，您可以根据父页面设置所有属性。请检查@input功能。