私はAngular2をTypeScriptで初めて使っています。私は現在のプロジェクトに取り組んでいますと、残念ながら、OnPushは何をするのか理解することはできません。戦略OnPushとはどういう意味ですか?
changeDetection:ChangeDetectionStrategy.OnPush
を私は多くのことを検索しましたが、見つかりませんでした(理解していませんでした)正解。
誰でも私に説明できますか?例は分かりやすいでしょう。
私はAngular2をTypeScriptで初めて使っています。私は現在のプロジェクトに取り組んでいますと、残念ながら、OnPushは何をするのか理解することはできません。戦略OnPushとはどういう意味ですか?
changeDetection:ChangeDetectionStrategy.OnPush
を私は多くのことを検索しましたが、見つかりませんでした(理解していませんでした)正解。
誰でも私に説明できますか?例は分かりやすいでしょう。
プッシュチェンジ検出では、コンポーネントの変更検出は入力が変更されたときにのみ実行され、入力が変更されたときにはオブジェクト全体が変更される必要があります。つまり、参照のみが変更された場合、変更の検出は実行されません。例えば
は、あなたが配列の要素に入力がある場合:あなたはpush
と親コンポーネントにその配列を変更する場合
@Input() testArray: Item[] = [];
を、変化検出は、子コンポーネントでは動作しません。しかし、あなたがこのようなことをすれば:
array = [...array, newItem];
<test-component [testArray]="array"></test-component>
変更検出が実行されます。これは、変更検出の実行回数を大幅に削減するため、アプリケーションのパフォーマンスを向上させるために使用されます。通常、不変データ構造、特にRedux
パターンとstore
(@ngrx/store
など)と対になります。
あなたが入力属性を持つ要素を持っている:
type Person {
name: string;
surname: string;
}
@Component({
selector: 'my-component',
changeDetection: ChangeDetectionStrategy.OnPush,
template: `<p> {{person.name}} {{person.surname}} </p>`
})
class myComponent {
...
@Input() person: Person;
...
}
あなた場合
これはObject全体の問題ではなく、その変更が '@Input()'プロパティの親から来ていることです。 「全体のオブジェクト」を変更したとしても、「参照のみが変更された場合はどうなるのですか」というのは、これが参照の変更です。 – n00dl3
ありがとうございます。私はそれがとても良い説明だと思います。だから、私はそれを子供(値を期待するコンポーネント)に書かなければなりません、正しいのでしょうか? –
@SamySammour OnPush検出を適用する場合、コンポーネントはスマート/ダムの原則に従う必要があります。つまり、データの取得、データの変更などのすべてのことはスマートコンポーネントで行う必要があり、ダムコンポーネントはプレゼンテーションにのみ使用する必要があります。これは、あなたの子コンポーネントが(上記のように)入力を持つだけで、私があなたに示した方法で親コンポーネントで変更を行う必要があることを意味します。 – Matsura
を持っています。このURLを確認することができますその人の初期値を次のように変更してください。
person.name="changed";
Angularは、オブジェクト自体が同じであるとみなすため、変更を検出しません。オブジェクト自体の属性ではなく、オブジェクトの属性を変更しました。あなたはこの変化を検出する角度にするために、オブジェクト全体(参照)を変更する必要があります。
person={name:'changed',surname:'something else'};
角度は不変オブジェクトとして入力要素を考慮し、その中の任意の変更は無視されるようなので、それはです。
の可能性のある重複した[何ChangeDetectionStrategyがAngular2にあるときデフォルトVsはOnPush使用するには?](https://stackoverflow.com/questions/42542639/what-is-changedetectionstrategy-in-angular2-and-when-to- use-onpush-vs-default) –