将样式添加到活动标题 - 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

您好，您可以使用 header 组件作为子组件和@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 功能。