将造型添加到主动标头 - 离子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);
  }

然后，我将应用程序头放在组件模块中，然后将该模块导入我的页面模块。一旦到达那里，我就可以将标题标签放在页面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.com.ponent.ts中使用输入装饰

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

，从"父组件"页面中，您可以通过或设置header_info。 从这里，您可以根据父页面设置所有属性。 请检查@Input功能。