イオン交換navbarの色を動的に

Question

ちょっとスクロールするときに1ページのnavbarの色を変更する必要があります。

ここでは、私のxmlファイルの一部を持っている：

<ion-header no-border> 

    <ion-navbar color="{{ toolbar_color }}"> 
    <ion-title (click)="change()">{{userdata.Name}}</ion-title> 
    </ion-navbar> 

</ion-header> 

<ion-content fullscreen class="container" (ionScrollEnd)="scrollHandler($event)"> 

私はクリックイベントを使用して、それを変更することにより、最初しようと試み、それがうまく働きました。

change() { 
    if (this.toolbar_color == "danger") { 
     this.toolbar_color = "light" 
    } else { 
     this.toolbar_color = "danger" 
    } 
} 

これはionScrollEndリスナーであり、動作しません。イベントは正しく発生しますが、toolbar_colorの変更はnavbarに影響しません。

scrollHandler(event) { 
    if (event.scrollTop > 100) { 
     console.log("ScrollEvent --> "+JSON.stringify(event)); 
     this.toolbar_color = "light" 
     // this.toolbar_change = true; 
    } else { 
     this.toolbar_color = "danger" 
     // this.toolbar_change = false; 
    } 
} 

どうしたらいいですか？

ありがとうございました:)

Answer 1

はTSファイルに@ViewChild(Content) content: Contentを追加し、終了イベントをスクロールするサブスクライブします。このリンクはworking versionを参照してください。参照してください時には角度

のスクロールに色を変更するには、HTMLファイル

import { Component, ViewChild, ChangeDetectorRef } from '@angular/core'; 
import { NavController, Content } from 'ionic-angular'; 

@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html' 
}) 
export class HomePage { 
    @ViewChild(Content) content: Content; 
    Arr = Array; //Array type captured in a variable 
    num:number = 1000; 
    toolbar_color: string; 


    constructor(public navCtrl: NavController, public ref : ChangeDetectorRef) { 
    this.toolbar_color="secondary"; 
    } 

    changeColor(){ 
    this.toolbar_color="primary"; 
    this.ref.detectChanges(); 
    } 

    ionViewDidLoad() { 
    //this.content.enableJsScroll(); 
    this.content.ionScrollEnd.subscribe(() => { 
     this.changeColor(); 
    }); 
} 

} 

forum discussion on this issueイオン

<ion-header> 
    <ion-navbar [color]="toolbar_color"> 
    <ion-title>Home</ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content padding> 
    <h2>Welcome to Ionic!</h2> 
    <p> 
    This starter project comes with simple tabs-based layout for apps 
    that are going to primarily use a Tabbed UI. 
    </p> 
    <p> 
    Take a look at the <code>pages/</code> directory to add or change tabs, 
    update any existing page or create new pages. 
    </p> 
    <div *ngFor="let i of Arr(num).fill(1)">{{i}}</div> 

</ion-content> 

更新-1

1. 追加コードが自動的にchangeDetectorを実行しません。 ChangeDetectorRefを使用して手動でトリガーできます。スクロール中に変更を検出するために追加されました。
2. 作業バージョンも更新されています。上記のリンクを確認してください