You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
Commit 4eb3724
Browse filesBrowse the repository at this point in the historyBrowse files
Copy file name to clipboardExpand all lines: adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md
+28-33Lines changed: 28 additions & 33 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -31,7 +31,7 @@ This section examines several common change detection scenarios to illustrate An
31
31
32
32
If Angular handles an event within a component without `OnPush` strategy, the framework executes change detection on the entire component tree. Angular will skip descendant component subtrees with roots using `OnPush`, which have not received new inputs.
33
33
34
-
As an example, if we set the change detection strategy of `MainComponent` to `OnPush` and the user interacts with a component outside the subtree with root `MainComponent`, Angular will check all the green components from the diagram below (`AppComponent`, `HeaderComponent`, `SearchComponent`, `ButtonComponent`) unless `MainComponent` receives new inputs:
34
+
As an example, if we set the change detection strategy of `MainComponent` to `OnPush` and the user interacts with a component outside the subtree with root `MainComponent`, Angular will check all the pink components from the diagram below (`AppComponent`, `HeaderComponent`, `SearchComponent`, `ButtonComponent`) unless `MainComponent` receives new inputs:
35
35
36
36
```mermaid
37
37
graph TD;
@@ -43,14 +43,11 @@ graph TD;
43
43
main --- details[DetailsComponent];
44
44
event>Event] --- search
45
45
46
-
style main fill:#E4BE74,color:#000
47
-
style login fill:#E4BE74,color:#000
48
-
style details fill:#E4BE74,color:#000
49
-
50
-
style app fill:#C1D5B0,color:#000
51
-
style header fill:#C1D5B0,color:#000
52
-
style button fill:#C1D5B0,color:#000
53
-
style search fill:#C1D5B0,color:#000
46
+
class app checkedNode
47
+
class header checkedNode
48
+
class button checkedNode
49
+
class search checkedNode
50
+
class event eventNode
54
51
```
55
52
56
53
## An event is handled by a component with OnPush
@@ -69,14 +66,13 @@ graph TD;
69
66
main --- details[DetailsComponent];
70
67
event>Event] --- main
71
68
72
-
style login fill:#E4BE74,color:#000
73
-
74
-
style app fill:#C1D5B0,color:#000
75
-
style header fill:#C1D5B0,color:#000
76
-
style button fill:#C1D5B0,color:#000
77
-
style search fill:#C1D5B0,color:#000
78
-
style main fill:#C1D5B0,color:#000
79
-
style details fill:#C1D5B0,color:#000
69
+
class app checkedNode
70
+
class header checkedNode
71
+
class button checkedNode
72
+
class search checkedNode
73
+
class main checkedNode
74
+
class details checkedNode
75
+
class event eventNode
80
76
```
81
77
82
78
## An event is handled by a descendant of a component with OnPush
Copy file name to clipboardExpand all lines: adev-ja/src/content/best-practices/update.en.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -13,7 +13,7 @@ HELPFUL: If you are currently using AngularJS, see [Upgrading from AngularJS](ht
13
13
14
14
## Getting notified of new releases
15
15
16
-
To be notified when new releases are available, follow [@angular](https://twitter.com/angular"@angular on Twitter") on Twitter or subscribe to the [Angular blog](https://blog.angular.dev"Angular blog").
16
+
To be notified when new releases are available, follow [@angular](https://x.com/angular"@angular on X") on X (formerly Twitter) or subscribe to the [Angular blog](https://blog.angular.dev"Angular blog").
新しいリリースが利用可能になったときに通知を受け取るには、Twitterで [@angular](https://twitter.com/angular"@angular on Twitter") をフォローするか、[Angular ブログ](https://blog.angular.dev"Angular ブログ")を購読してください。
16
+
新しいリリースが利用可能になったときに通知を受け取るには、Twitterで [@angular](https://x.com/angular"@angular on X (formerly Twitter)") をフォローするか、[Angular ブログ](https://blog.angular.dev"Angular ブログ")を購読してください。
0 commit comments