角度2子コンポーネント検出しない変更例に正しく

Question

Plunker： https://plnkr.co/edit/aWUE54EUMIm8rnw3PZOO?p=preview

最初のボタンは、値をインクリメントします。値が10未満の場合は、ボタンを有効にする必要があります。それ以外の場合は、ボタンを無効にする必要があります。 番目のボタンは、すべてがで[OK]を見ているにもかかわらず、0

this.button1 = new ButtonAction(
    "info", 
    "check", 
    "right", 
    "Click me!", 
    "medium", 
    true, 
    true, 
    new Command(
    () => this.val += 1, 
    () => { 
     return this.val < 10; 
    } 
), 
    false 
); 

this.button2 = new ButtonAction(
    "info", 
    "check", 
    "right", 
    "Reset first button!", 
    "medium", 
    true, 
    true, 
    new Command(
    () => this.val = 0, 
    null 
), 
    false 
); 

値は、最初のボタンが実際に自分自身を無効に10に達するまで値をリセットしますが、私は値を0にリセットしたときには更新されません。出力：markForCheckはどちらか動作しません

set val(v: number){ 
    this._val = v; 
    console.log("Marked for check with value "+this._val); 
    //this.cd.markForCheck(); 
    this.cd.detectChanges(); 
} 

番目の取り扱いを除きので、私は本当に何をするか分からない：

Marked for check with value 7 
btnClass: btn btn-outline-info btn-block 
isDisabled: false 
Marked for check with value 8 
btnClass: btn btn-outline-info btn-block 
isDisabled: false 
Marked for check with value 9 
btnClass: btn btn-outline-info btn-block 
isDisabled: false 
Marked for check with value 10 
btnClass: btn btn-outline-info btn-block disabled 
isDisabled: true 
Marked for check with value 0 
btnClass: btn btn-outline-info btn-block 
isDisabled: false 

これは値が設定されている方法ですe DOMをElementRefで処理しています（すでに試してみましたが動作しますが）。実際にこれをやりたいとは思わない=）

私は問題を検出しようとしていました。現在のボタンクラスはbtn btn-outline-info btn-blockからbtn btn-outline-info btn-block disabledになると動作しますが、それ以外の方法では動作しません。

画像には、2番目のボタンで値をリセットしたときと、buttonClassesが初めて呼び出されたときにどうなるかが示されています。

self._expr_2は前の値であり、それはbtn btn-outline-info btn-blockだが、それはまたdisabledを持っている必要があります。現在の値にはdisabledクラスが正しくありません。

ご協力いただきありがとうございます。私は実際にここで何をすべきかわからない...

Answer 1

ChangeDetectionStrategy.OnPush戦略では、cd.markForCheck APIメソッドを呼び出す必要があります。

最も重要なこと：

ルートが 次の変更検出の実行のためにチェックするまで、それは私たちのコンポーネントからのパスをマーク。

はつまり、あなたのアクションの後だけに一つのボタンに動作しますあなたのUIButtonChangeDetectorRefsそうでない場合は変更の検出にそれを発射する必要があります。

angular2が検出を変更するたびに、変更後にチェックマークが付けられます。

UIButton.ngfactory：ここ

はangular2ハンドルがイベントをクリックする方法です。JS

_View_UIButton0.prototype._handle_click_1_0 = function($event) { 
    var self = this; 
    self.markPathToRootAsCheckOnce(); 
    self.debug(1,3,14); 
    var pd_0 = (self.context.clicked() !== false); 
    return (true && pd_0); 
}; 

ラインでのご注意：

self.markPathToRootAsCheckOnce(); 

それを確認する現在のボタンをマークし、2番目のボタンはChangeDetectorStatus.Checked状態で残り、チェックが起こるときは省略します。

だからあなたのソリューションは、次のようになります。

1）UIButtonコンポーネント

constructor(public cd: ChangeDetectorRef) {} 

2）アプリケーションコンポーネント

@ViewChildren(UIButton) buttons: QueryList<UIButton>; 

set val(v: number){ 
    this._val = v; 
    console.log("Marked for check!"); 
    this.buttons.toArray().forEach(btn => btn.cd.markForCheck()); 
} 

両方のボタンが

参照をチェックされます。この道をそれは動作中Plunker

希望すると、これが役立ちます。