blocks|key|2659223|text|在组件中使用ngOnChanges()生命周期方法。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2659224|在检查完数据绑定属性之后，如果视图和内容子级中至少有一个发生了更改，则会在检查它们之前立即调用|2659225|+ngOnChanges。|blockquote|2659226|2659227|2659228|这是Docs。|2659229|entityMap|0|LINK|mutability|MUTABLE|url|https://angular.io/docs/ts/latest/api/core/index/OnChanges-class.html^0|6|D|0|0|0|0|0|2|4|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|10|8|@]|D|@]|E|$]]|$1|K|3|-4|5|6|7|11|8|@]|D|@]|E|$]]|$1|L|3|-4|5|6|7|12|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|13|8|@]|D|@$9|14|A|15|1|16]]|E|$]]|$1|O|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

Use the <code>ngOnChanges()</code> lifecycle method in your component.

<blockquote>
 ngOnChanges is called right after the data-bound properties have been
 checked and before view and content children are checked if at least
 one of them has changed.
</blockquote>

Here are the <a href="https://angular.io/docs/ts/latest/api/core/index/OnChanges-class.html" rel="noreferrer">Docs</a>.

blocks|key|2870247|text|在函数签名中使用SimpleChanges类型时，我在控制台、编译器和集成开发环境中遇到错误。为防止出现错误，请在签名中使用any关键字。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2870248|ngOnChanges(changes:+any)+{
++++console.log(changes.myInput.currentValue);
}|code-block|syntax|javascript|2870249|编辑：|BOLD|2870250|正如Jon在下面指出的，在使用括号表示法而不是点表示法时，可以使用SimpleChanges签名。|2870251|ngOnChanges(changes:+SimpleChanges)+{
++++console.log(changes['myInput'].currentValue);
}|2870252|entityMap^0|8|D|1Q|3|0|0|0|3|0|X|D|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]|$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Y|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Z|8|@$9|10|A|11|B|M]]|D|@]|E|$]]|$1|N|3|O|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@]|E|$]]|$1|P|3|Q|5|H|7|15|8|@]|D|@]|E|$I|J]]|$1|R|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|S|$]]

I was getting errors in the console as well as the compiler and IDE when using the <code>SimpleChanges</code> type in the function signature. To prevent the errors, use the <code>any</code> keyword in the signature instead.
<pre class="lang-js prettyprint-override"><code>ngOnChanges(changes: any) {
 console.log(changes.myInput.currentValue);
}
</code></pre>
EDIT:
As Jon pointed out below, you can use the <code>SimpleChanges</code> signature when using bracket notation rather than dot notation.
<pre class="lang-js prettyprint-override"><code>ngOnChanges(changes: SimpleChanges) {
 console.log(changes['myInput'].currentValue);
}
</code></pre>

blocks|key|2659428|text|实际上，当angular2%2B中的子组件中的输入发生变化时，可以通过两种方式进行检测和操作:|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2659429|2659430|您可以使用ngOnChanges()生命周期方法，如旧答案：|ordered-list-item|2659431|中所述|2659432|++++@Input()+categoryId:+string;
++++++++
++++ngOnChanges(changes:+SimpleChanges)+{
++++++++
++++++++this.doSomething(changes.categoryId.currentValue);
++++++++//+You+can+also+use+categoryId.previousValue+and+
++++++++//+categoryId.firstChange+for+comparing+old+and+new+values
++++++++
++++}|code-block|syntax|javascript|2659433|文档链接：ngOnChanges,+SimpleChanges,+SimpleChange|2659434|演示示例:查看this+plunker|2659435|2659436|Alternately，您还可以使用输入属性设置器，如下所示：|2659437|2659438|++++private+_categoryId:+string;
++++
++++@Input()+set+categoryId(value:+string)+{
++++
+++++++this._categoryId+=+value;
+++++++this.doSomething(this._categoryId);
++++
++++}
++++
++++get+categoryId():+string+{
++++
++++++++return+this._categoryId;
++++
++++}|2659439|文档链接:查看here。|2659440|演示示例:查看this+plunker。|2659441|您应该使用哪种方法？|2659442|如果您的组件有多个输入，那么，如果您使用ngOnChanges()，您将在ngOnChanges()中一次获得所有输入的所有更改。使用这种方法，您还可以比较已更改的输入的当前值和以前的值，并采取相应的操作。|2659443|但是，如果您想在只有一个特定的输入更改时执行某些操作(而不关心其他输入)，那么使用输入属性设置器可能会更简单。但是，这种方法没有提供一种内置的方法来比较更改后的输入的以前和当前值(使用ngOnChanges生命周期方法可以很容易地做到这一点)。|2659444|EDIT+2017-07-25:在某些情况下，角度变化检测可能仍不会触发|2659445|通常，只要父组件更改了它传递给子组件的数据，只要数据是JS原始数据类型(字符串、数字、布尔值)，就会触发对setter和ngOnChanges的更改检测。但是，在以下情况下，它将不会触发，您必须采取额外的操作才能使其工作。|2659446|2659447|如果您使用嵌套对象或数组(而不是JS基元数据类型)将数据从父对象传递给子对象，则可能不会触发更改检测(使用setter或ngchange)，这在user:+muetzerich的回答中也有提到。有关解决方案，请查看here.|2659448|2659449|2659450|如果您在angular上下文之外(即，外部)更改数据，则angular将不会知道这些更改。您可能必须在组件中使用ChangeDetectorRef或NgZone，以使angular感知外部更改，从而触发更改检测。请参阅this.|2659451|2659452|entityMap|0|LINK|mutability|MUTABLE|url|https://angular.io/api/core/OnChanges|1|https://angular.io/api/core/SimpleChanges|2|https://angular.io/api/core/SimpleChange|3|https://plnkr.co/edit/LUr2bMQRhhAeuLN3R5B6?p=preview|4|https://angular.io/guide/component-interaction#intercept-input-property-changes-with-a-setter|5|https://plnkr.co/edit/EsolgwJVuvOUx6rKk8d4?p=preview|6|https://stackoverflow.com/questions/34796901/angular2-change-detection-ngonchanges-not-firing-for-nested-object|7|https://stackoverflow.com/questions/42971865/angular2-zone-run-vs-changedetectorref-detectchanges^0|0|19|0|0|5|J|0|0|0|5|C|0|I|E|1|X|C|2|0|7|C|3|0|0|I|7|0|0|0|7|4|4|0|7|C|5|0|0|A|0|0|0|0|10|0|0|0|2Z|4|6|0|0|0|31|4|7|0|0^^$0|@$1|2|3|4|5|6|7|28|8|@$9|29|A|2A|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|2B|8|@]|D|@]|E|$]]|$1|G|3|H|5|I|7|2C|8|@$9|2D|A|2E|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|2F|8|@]|D|@]|E|$]]|$1|L|3|M|5|N|7|2G|8|@]|D|@]|E|$O|P]]|$1|Q|3|R|5|6|7|2H|8|@]|D|@$9|2I|A|2J|1|2K]|$9|2L|A|2M|1|2N]|$9|2O|A|2P|1|2Q]]|E|$]]|$1|S|3|T|5|6|7|2R|8|@]|D|@$9|2S|A|2T|1|2U]]|E|$]]|$1|U|3|-4|5|6|7|2V|8|@]|D|@]|E|$]]|$1|V|3|W|5|I|7|2W|8|@$9|2X|A|2Y|B|C]]|D|@]|E|$]]|$1|X|3|-4|5|6|7|2Z|8|@]|D|@]|E|$]]|$1|Y|3|Z|5|N|7|30|8|@]|D|@]|E|$O|P]]|$1|10|3|11|5|6|7|31|8|@]|D|@$9|32|A|33|1|34]]|E|$]]|$1|12|3|13|5|6|7|35|8|@]|D|@$9|36|A|37|1|38]]|E|$]]|$1|14|3|15|5|6|7|39|8|@$9|3A|A|3B|B|C]]|D|@]|E|$]]|$1|16|3|17|5|6|7|3C|8|@]|D|@]|E|$]]|$1|18|3|19|5|6|7|3D|8|@]|D|@]|E|$]]|$1|1A|3|1B|5|6|7|3E|8|@$9|3F|A|3G|B|C]]|D|@]|E|$]]|$1|1C|3|1D|5|6|7|3H|8|@]|D|@]|E|$]]|$1|1E|3|-4|5|6|7|3I|8|@]|D|@]|E|$]]|$1|1F|3|1G|5|I|7|3J|8|@]|D|@$9|3K|A|3L|1|3M]]|E|$]]|$1|1H|3|-4|5|6|7|3N|8|@]|D|@]|E|$]]|$1|1I|3|-4|5|6|7|3O|8|@]|D|@]|E|$]]|$1|1J|3|1K|5|I|7|3P|8|@]|D|@$9|3Q|A|3R|1|3S]]|E|$]]|$1|1L|3|-4|5|6|7|3T|8|@]|D|@]|E|$]]|$1|1M|3|-4|5|6|7|3U|8|@]|D|@]|E|$]]]|1N|$1O|$5|1P|1Q|1R|E|$1S|1T]]|1U|$5|1P|1Q|1R|E|$1S|1V]]|1W|$5|1P|1Q|1R|E|$1S|1X]]|1Y|$5|1P|1Q|1R|E|$1S|1Z]]|20|$5|1P|1Q|1R|E|$1S|21]]|22|$5|1P|1Q|1R|E|$1S|23]]|24|$5|1P|1Q|1R|E|$1S|25]]|26|$5|1P|1Q|1R|E|$1S|27]]]]

Actually, there are two ways of detecting and acting upon when an input changes in the child component in angular2+ :
<ol>
<li>You can use the ngOnChanges() lifecycle method as also mentioned in older answers:</li>
</ol>
<pre class="lang-js prettyprint-override"><code> @Input() categoryId: string;
 
 ngOnChanges(changes: SimpleChanges) {
 
 this.doSomething(changes.categoryId.currentValue);
 // You can also use categoryId.previousValue and 
 // categoryId.firstChange for comparing old and new values
 
 }
 
</code></pre>
Documentation Links: <a href="https://angular.io/api/core/OnChanges" rel="noreferrer">ngOnChanges,</a> <a href="https://angular.io/api/core/SimpleChanges" rel="noreferrer">SimpleChanges,</a> <a href="https://angular.io/api/core/SimpleChange" rel="noreferrer">SimpleChange</a> 
Demo Example: Look at <a href="https://plnkr.co/edit/LUr2bMQRhhAeuLN3R5B6?p=preview" rel="noreferrer">this plunker</a>
<ol start="2">
<li>Alternately, you can also use an input property setter as follows:</li>
</ol>
<pre class="lang-js prettyprint-override"><code> private _categoryId: string;
 
 @Input() set categoryId(value: string) {
 
 this._categoryId = value;
 this.doSomething(this._categoryId);
 
 }
 
 get categoryId(): string {
 
 return this._categoryId;
 
 }
</code></pre>
Documentation Link: Look <a href="https://angular.io/guide/component-interaction#intercept-input-property-changes-with-a-setter" rel="noreferrer">here</a>.
Demo Example: Look at <a href="https://plnkr.co/edit/EsolgwJVuvOUx6rKk8d4?p=preview" rel="noreferrer">this plunker</a>.
WHICH APPROACH SHOULD YOU USE?
If your component has several inputs, then, if you use ngOnChanges(), you will get all changes for all the inputs at once within ngOnChanges(). Using this approach, you can also compare current and previous values of the input that has changed and take actions accordingly.
However, if you want to do something when only a particular single input changes (and you don't care about the other inputs), then it might be simpler to use an input property setter. However, this approach does not provide a built in way to compare previous and current values of the changed input (which you can do easily with the ngOnChanges lifecycle method).
EDIT 2017-07-25: ANGULAR CHANGE DETECTION MAY STILL NOT FIRE UNDER SOME CIRCUMSTANCES
Normally, change detection for both setter and ngOnChanges will fire whenever the parent component changes the data it passes to the child, provided that the data is a JS primitive datatype(string, number, boolean). However, in the following scenarios, it will not fire and you have to take extra actions in order to make it work.
<ol>
<li>If you are using a nested object or array (instead of a JS primitive data type) to pass data from Parent to Child, change detection (using either setter or ngchanges) might not fire, as also mentioned in the answer by user: muetzerich. For solutions look <a href="https://stackoverflow.com/questions/34796901/angular2-change-detection-ngonchanges-not-firing-for-nested-object">here</a>.
</li>
<li>If you are mutating data outside of the angular context (i.e., externally), then angular will not know of the changes. You may have to use ChangeDetectorRef or NgZone in your component for making angular aware of external changes and thereby triggering change detection. Refer to <a href="https://stackoverflow.com/questions/42971865/angular2-zone-run-vs-changedetectorref-detectchanges">this</a>.
</li>
</ol>

blocks|key|114484|text|我只想补充一点，如果@Input值不是原始值，那么还有一个名为DoCheck的生命周期钩子非常有用。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|114485|我有一个数组作为数组，所以当内容改变时，这不会触发OnChanges事件(因为Angular做的检查是‘简单’的，并且不是很深入，所以数组仍然是一个数组，即使数组上的内容已经改变了)。|114486|然后，我实现了一些自定义检查代码，以决定是否要使用更改后的Array更新视图。|114487|entityMap^0|A|6|V|7|0|P|9|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@$9|M|A|N|B|C]|$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|T|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|U|8|@]|D|@]|E|$]]]|K|$]]

I just want to add that there is another Lifecycle hook called <code>DoCheck</code> that is useful if the <code>@Input</code> value is not a primitive value.

I have an Array as an <code>Input</code> so this does not fire the <code>OnChanges</code> event when the content changes (because the checking that Angular does is 'simple' and not deep so the Array is still an Array, even though the content on the Array has changed).

I then implement some custom checking code to decide if I want to update my view with the changed Array.

blocks|key|2659500|text|您还可以拥有一个observable，它会在父component(CategoryComponent)中的更改时触发，并在子组件的订阅中执行您想要执行的操作。(videoListComponent)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2659501|service.ts|2659502|public+categoryChange$+:+ReplaySubject<any>+=+new+ReplaySubject(1);|code-block|syntax|javascript|2659503|CategoryComponent.ts|2659504|public+onCategoryChange():+void+{
++service.categoryChange$.next();
}|2659505|videoListComponent.ts|2659506|public+ngOnInit():+void+{
++service.categoryChange$.subscribe(()+=>+{
+++//+do+your+logic
++});
}|2659507|entityMap^0|N|S|28|I|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|11|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|13|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|14|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|15|8|@]|D|@]|E|$]]|$1|S|3|T|5|J|7|16|8|@]|D|@]|E|$K|L]]|$1|U|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|V|$]]

You can also , have an observable which triggers on changes in the parent <code>component(CategoryComponent)</code> and do what you want to do in the subscribtion in the child component. (<code>videoListComponent</code>)
service.ts
<pre class="lang-js prettyprint-override"><code>public categoryChange$ : ReplaySubject&lt;any&gt; = new ReplaySubject(1);
</code></pre>
CategoryComponent.ts
<pre class="lang-js prettyprint-override"><code>public onCategoryChange(): void {
 service.categoryChange$.next();
}
</code></pre>
videoListComponent.ts
<pre><code>public ngOnInit(): void {
 service.categoryChange$.subscribe(() =&gt; {
 // do your logic
 });
}
</code></pre>

blocks|key|114244|text|最安全的方法是使用@Input参数的共享service+instead。此外，@Input参数不会检测复杂嵌套对象类型中的更改。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|114245|下面是一个简单的服务示例：|114246|114247|+Service.ts|blockquote|BOLD|114248|114249|114250|import+{+Injectable+}+from+'@angular/core';
import+{+Subject+}+from+'rxjs/Subject';

@Injectable()
export+class+SyncService+{

++++private+thread_id+=+new+Subject<number>();
++++thread_id$+=+this.thread_id.asObservable();

++++set_thread_id(thread_id:+number)+{
++++++++this.thread_id.next(thread_id);
++++}

}|code-block|syntax|javascript|114251|114252|+Component.ts|114253|114254|114255|export+class+ConsumerComponent+implements+OnInit+{

++constructor(
++++public+sync:+SyncService
++)+{
+++++this.sync.thread_id$.subscribe(thread_id+=>+{
++++++++++**Process+Value+Updates+Here**
++++++}
++++}
++
++selectChat(thread_id:+number)+{++<---+How+to+update+values
++++this.sync.set_thread_id(thread_id);
++}
}|114256|114257|您可以在其他组件中使用类似的实现，所有组件都将共享相同的共享值。|114258|entityMap|0|LINK|mutability|MUTABLE|url|https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service^0|9|6|13|6|K|F|0|0|0|0|1|A|0|0|0|0|0|1|C|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1B|8|@$9|1C|A|1D|B|C]|$9|1E|A|1F|B|C]]|D|@$9|1G|A|1H|1|1I]]|E|$]]|$1|F|3|G|5|6|7|1J|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|1K|8|@]|D|@]|E|$]]|$1|I|3|J|5|K|7|1L|8|@$9|1M|A|1N|B|L]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|1O|8|@]|D|@]|E|$]]|$1|N|3|-4|5|6|7|1P|8|@]|D|@]|E|$]]|$1|O|3|P|5|Q|7|1Q|8|@]|D|@]|E|$R|S]]|$1|T|3|-4|5|6|7|1R|8|@]|D|@]|E|$]]|$1|U|3|V|5|K|7|1S|8|@$9|1T|A|1U|B|L]]|D|@]|E|$]]|$1|W|3|-4|5|6|7|1V|8|@]|D|@]|E|$]]|$1|X|3|-4|5|6|7|1W|8|@]|D|@]|E|$]]|$1|Y|3|Z|5|Q|7|1X|8|@]|D|@]|E|$R|S]]|$1|10|3|-4|5|6|7|1Y|8|@]|D|@]|E|$]]|$1|11|3|12|5|6|7|1Z|8|@]|D|@]|E|$]]|$1|13|3|-4|5|6|7|20|8|@]|D|@]|E|$]]]|14|$15|$5|16|17|18|E|$19|1A]]]]

The safest bet is to go with a shared <a href="https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service" rel="nofollow noreferrer">service instead</a> of a <code>@Input</code> parameter.
Also, <code>@Input</code> parameter does not detect changes in complex nested object type.
A simple example service is as follows:
<blockquote>
Service.ts
</blockquote>
<pre class="lang-js prettyprint-override"><code>import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class SyncService {

 private thread_id = new Subject&lt;number&gt;();
 thread_id$ = this.thread_id.asObservable();

 set_thread_id(thread_id: number) {
 this.thread_id.next(thread_id);
 }

}
</code></pre>
<blockquote>
Component.ts
</blockquote>
<pre class="lang-js prettyprint-override"><code>export class ConsumerComponent implements OnInit {

 constructor(
 public sync: SyncService
 ) {
 this.sync.thread_id$.subscribe(thread_id =&gt; {
 **Process Value Updates Here**
 }
 }
 
 selectChat(thread_id: number) { &lt;--- How to update values
 this.sync.set_thread_id(thread_id);
 }
}
</code></pre>
<hr />
You can use a similar implementation in other components and all your compoments will share the same shared values.

blocks|key|112289|text|如果您不想使用事件方法实现，您还可以通过valueChanges+ngOnChange+onChange()+等方式订阅特定项的更改。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|CODE|entityRanges|data|112290|myForm+=+new+FormGroup({
++first:+new+FormControl(),
});

this.myForm.valueChanges.subscribe((formValue)+=>+{
++this.changeDetector.markForCheck();
});|code-block|syntax|javascript|112291|由于在此声明中使用了以下内容而写入markForCheck()：|112292|changeDetection:+ChangeDetectionStrategy.OnPush|112293|entityMap^0|K|C|K|C|X|A|18|A|0|0|H|E|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|D]|$9|W|A|X|B|D]|$9|Y|A|Z|B|D]]|E|@]|F|$]]|$1|G|3|H|5|I|7|10|8|@]|E|@]|F|$J|K]]|$1|L|3|M|5|6|7|11|8|@$9|12|A|13|B|D]]|E|@]|F|$]]|$1|N|3|O|5|I|7|14|8|@]|E|@]|F|$J|K]]|$1|P|3|-4|5|6|7|15|8|@]|E|@]|F|$]]]|Q|$]]

If you don't want use <code>ngOnChange</code> implement og <code>onChange()</code> method, you can also subscribe to changes of a specific item by <code>valueChanges</code> event, ETC.
<pre class="lang-js prettyprint-override"><code>myForm = new FormGroup({
 first: new FormControl(),
});

this.myForm.valueChanges.subscribe((formValue) =&gt; {
 this.changeDetector.markForCheck();
});
</code></pre>
the <code>markForCheck()</code> writen because of using in this declare:
<pre class="lang-js prettyprint-override"><code>changeDetection: ChangeDetectionStrategy.OnPush
</code></pre>

blocks|key|2659573|text|@Input()+set+categoryId(categoryId:+number)+{
++++++console.log(categoryId)
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2659574|请尝试使用此方法。希望这能有所帮助|unstyled|2659575|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre class="lang-js prettyprint-override"><code>@Input() set categoryId(categoryId: number) {
 console.log(categoryId)
}
</code></pre>
please try using this method. Hope this helps

blocks|key|2659587|text|这里，当你的输入属性改变时，ngOnChanges总是会被触发：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2659588|ngOnChanges(changes:+SimpleChanges):+void+{
+console.log(changes.categoryId.currentValue)
}|code-block|syntax|javascript|2659589|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Here ngOnChanges will trigger always when your input property changes:
<pre class="lang-js prettyprint-override"><code>ngOnChanges(changes: SimpleChanges): void {
 console.log(changes.categoryId.currentValue)
}
</code></pre>

blocks|key|2659613|text|您也可以只传递一个EventEmitter作为输入。我不太确定这是不是最佳实践...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2659614|CategoryComponent.ts：|2659615|categoryIdEvent:+EventEmitter<string>+=+new+EventEmitter<>();

-+OTHER+CODE+-

setCategoryId(id)+{
+this.category.id+=+id;
+this.categoryIdEvent.emit(this.category.id);
}|code-block|syntax|javascript|2659616|CategoryComponent.html：|2659617|<video-list+*ngIf="category"+[categoryId]="categoryIdEvent"></video-list>|2659618|在VideoListComponent.ts中：|2659619|@Input()+categoryIdEvent:+EventEmitter<string>
....
ngOnInit()+{
+this.categoryIdEvent.subscribe(newID+=>+{
++this.categoryId+=+newID;
+}
}|2659620|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

You could also just pass an EventEmitter as Input. Not quite sure if this is best practice tho...
CategoryComponent.ts:
<pre class="lang-js prettyprint-override"><code>categoryIdEvent: EventEmitter&lt;string&gt; = new EventEmitter&lt;&gt;();

- OTHER CODE -

setCategoryId(id) {
 this.category.id = id;
 this.categoryIdEvent.emit(this.category.id);
}
</code></pre>
CategoryComponent.html:
<pre class="lang-html prettyprint-override"><code>&lt;video-list *ngIf=&quot;category&quot; [categoryId]=&quot;categoryIdEvent&quot;&gt;&lt;/video-list&gt;
</code></pre>
And in VideoListComponent.ts:
<pre class="lang-js prettyprint-override"><code>@Input() categoryIdEvent: EventEmitter&lt;string&gt;
....
ngOnInit() {
 this.categoryIdEvent.subscribe(newID =&gt; {
 this.categoryId = newID;
 }
}
</code></pre>

blocks|key|2659639|text|此解决方案使用proxy类，并提供以下优势：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2659640|与目前推荐的其他解决方案相比，与使用ngOnChanges()相比，|style|CODE|2659641|使用户能够充分利用RXJS|unordered-list-item|BOLD|2659642|More+compact的强大功能|2659643|+typesafe|2659644|2659645|示例用法：|2659646|@Input()
public+num:+number;
numChanges$+=+observeProperty(this+as+MyComponent,+'num');|code-block|syntax|javascript|2659647|实用函数：|2659648|export+function+observeProperty<T,+K+extends+keyof+T>(target:+T,+key:+K)+{
++const+subject+=+new+BehaviorSubject<T[K]>(target[key]);
++Object.defineProperty(target,+key,+{
++++get():+T[K]+{+return+subject.getValue();+},
++++set(newValue:+T[K]):+void+{
++++++if+(newValue+!==+subject.getValue())+{
++++++++subject.next(newValue);
++++++}
++++}
++});
++return+subject;
}|2659649|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy^0|7|5|0|0|I|D|0|9|4|0|5|7|0|1|8|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|19|8|@]|9|@$A|1A|B|1B|1|1C]]|C|$]]|$1|D|3|E|5|6|7|1D|8|@$A|1E|B|1F|F|G]]|9|@]|C|$]]|$1|H|3|I|5|J|7|1G|8|@$A|1H|B|1I|F|K]]|9|@]|C|$]]|$1|L|3|M|5|J|7|1J|8|@$A|1K|B|1L|F|K]]|9|@]|C|$]]|$1|N|3|O|5|J|7|1M|8|@$A|1N|B|1O|F|K]]|9|@]|C|$]]|$1|P|3|-4|5|6|7|1P|8|@]|9|@]|C|$]]|$1|Q|3|R|5|6|7|1Q|8|@]|9|@]|C|$]]|$1|S|3|T|5|U|7|1R|8|@]|9|@]|C|$V|W]]|$1|X|3|Y|5|6|7|1S|8|@]|9|@]|C|$]]|$1|Z|3|10|5|U|7|1T|8|@]|9|@]|C|$V|W]]|$1|11|3|-4|5|6|7|1U|8|@]|9|@]|C|$]]]|12|$13|$5|14|15|16|C|$17|18]]]]

This solution uses a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy" rel="nofollow noreferrer">proxy</a> class and offers the following advantages:
<ul>
<li>Allows the consumer to leverage the power of RXJS</li>
<li>More compact than other solutions proposed so far</li>
<li>More typesafe than using <code>ngOnChanges()</code></li>
</ul>
Example usage:
<pre class="lang-js prettyprint-override"><code>@Input()
public num: number;
numChanges$ = observeProperty(this as MyComponent, 'num');
</code></pre>
Utility function:
<pre class="lang-js prettyprint-override"><code>export function observeProperty&lt;T, K extends keyof T&gt;(target: T, key: K) {
 const subject = new BehaviorSubject&lt;T[K]&gt;(target[key]);
 Object.defineProperty(target, key, {
 get(): T[K] { return subject.getValue(); },
 set(newValue: T[K]): void {
 if (newValue !== subject.getValue()) {
 subject.next(newValue);
 }
 }
 });
 return subject;
}
</code></pre>

blocks|key|112346|text|您可以在外观服务中使用BehaviorSubject，然后在任何组件中订阅该主题，并且当事件碰巧触发数据更改时，对其调用.next()。确保在on+destroy生命周期钩子中关闭这些订阅。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|112347|data-api.facade.ts|BOLD|112348|@Injectable({
++providedIn:+'root'
})
export+class+DataApiFacade+{

currentTabIndex:+BehaviorSubject<number>+=+new+BehaviorSubject(0);

}|code-block|syntax|javascript|112349|some.component.ts|112350|constructor(private+dataApiFacade:+DataApiFacade){}

ngOnInit():+void+{
++this.dataApiFacade.currentTabIndex
++++.pipe(takeUntil(this.destroy$))
+++++++.subscribe(value+=>+{
++++++++++if+(value)+{
+++++++++++++this.currentTabIndex+=+value;
++++++++++}
++++});
}

setTabView(event:+MatTabChangeEvent)+{
++this.dataApiFacade.currentTabIndex.next(event.index);
}

ngOnDestroy()+{
++this.destroy$.next(true);
++this.destroy$.complete();
}|112351|entityMap^0|B|F|1O|7|0|0|I|0|0|0|H|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]|$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@$9|Z|A|10|B|H]]|D|@]|E|$]]|$1|I|3|J|5|K|7|11|8|@]|D|@]|E|$L|M]]|$1|N|3|O|5|6|7|12|8|@$9|13|A|14|B|H]]|D|@]|E|$]]|$1|P|3|Q|5|K|7|15|8|@]|D|@]|E|$L|M]]|$1|R|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|S|$]]

You can use a <code>BehaviorSubject</code> within a facade service then subscribe to that subject in any component and when an event happens to trigger a change in data call <code>.next()</code> on it. Make sure to close out those subscriptions within the on destroy lifecycle hook.
data-api.facade.ts
<pre class="lang-js prettyprint-override"><code>@Injectable({
 providedIn: 'root'
})
export class DataApiFacade {

currentTabIndex: BehaviorSubject&lt;number&gt; = new BehaviorSubject(0);

}
</code></pre>
some.component.ts
<pre class="lang-js prettyprint-override"><code>constructor(private dataApiFacade: DataApiFacade){}

ngOnInit(): void {
 this.dataApiFacade.currentTabIndex
 .pipe(takeUntil(this.destroy$))
 .subscribe(value =&gt; {
 if (value) {
 this.currentTabIndex = value;
 }
 });
}

setTabView(event: MatTabChangeEvent) {
 this.dataApiFacade.currentTabIndex.next(event.index);
}

ngOnDestroy() {
 this.destroy$.next(true);
 this.destroy$.complete();
}
</code></pre>

blocks|key|2870727|text|基本上，这两种建议的解决方案在大多数情况下都工作得很好。我对ngOnChange()的主要负面体验是缺乏类型安全。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2870728|在我的一个项目中，我做了一些重命名，之后一些神奇的字符串保持不变，bug当然需要一些时间才浮出水面。|2870729|Setter没有这个问题:您的IDE或编译器会让您知道任何不匹配的情况。|2870730|entityMap^0|U|C|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|P|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|K|$]]

Basically both suggested solutions work fine in most cases.
My main negative experience with ngOnChange() is the lack of type safety.
In one of my projects I did some renaming, following which some of the magic strings remained unchanged, and the bug of course took some time to surface.
Setters do not have that issue: your IDE or compiler will let you know of any mismatch.

blocks|key|112047|text|您可以使用ngOnChanges()生命周期方法|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|112048|@Input()+inputValue:+string;

ngOnChanges(changes:+SimpleChanges)+{
++++console.log(changes['inputValue'].currentValue);
}|code-block|syntax|javascript|112049|entityMap^0|5|J|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

You can use the ngOnChanges() lifecycle method
<pre><code>@Input() inputValue: string;

ngOnChanges(changes: SimpleChanges) {
 console.log(changes['inputValue'].currentValue);
}
</code></pre>

blocks|key|2870772|text|如果您正在处理使用@Input在父组件和子组件之间共享数据的情况，则可以使用生命周期方法ngOnChanges来检测@Input数据更改|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|CODE|entityRanges|data|2870773|+ngOnChanges(changes:+SimpleChanges)+{
++++if+(!changes.categoryId.firstChange)+{
++++++//+only+logged+upon+a+change+after+rendering
++++++console.log(changes.categoryId.currentValue);
++++}
++}|code-block|syntax|javascript|2870774|我建议您应该注意为子组件实现的更改策略，出于某些性能原因，您应该添加ChangeDetectionStrategy.OnPush：|2870775|示例-代码:|2870776|@Component({
++selector:+'app-hero-detail',
++templateUrl:+'./hero-detail.component.html',
++changeDetection:+ChangeDetectionStrategy.OnPush
})
export+class+VideoListComponent+implements+OnChanges+{
++@Input()+categoryId:+string;|2870777|entityMap^0|9|6|18|B|1M|6|9|6|18|B|1M|6|0|0|0|0|6|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]|$9|W|A|X|B|C]|$9|Y|A|Z|B|C]|$9|10|A|11|B|D]|$9|12|A|13|B|D]|$9|14|A|15|B|D]]|E|@]|F|$]]|$1|G|3|H|5|I|7|16|8|@]|E|@]|F|$J|K]]|$1|L|3|M|5|6|7|17|8|@]|E|@]|F|$]]|$1|N|3|O|5|6|7|18|8|@$9|19|A|1A|B|C]]|E|@]|F|$]]|$1|P|3|Q|5|I|7|1B|8|@]|E|@]|F|$J|K]]|$1|R|3|-4|5|6|7|1C|8|@]|E|@]|F|$]]]|S|$]]

If you're dealing with the case that your are using <code>@Input</code> to share data between parent and child component, you can detect <code>@Input</code> data changes by using the lifecycle method: <code>ngOnChanges</code>
<pre><code> ngOnChanges(changes: SimpleChanges) {
 if (!changes.categoryId.firstChange) {
 // only logged upon a change after rendering
 console.log(changes.categoryId.currentValue);
 }
 }
</code></pre>
And I'm advising that you should care of the change strategy implemented for the child component you should add ChangeDetectionStrategy.OnPush for some performance reason :
Example-Code :
<pre><code>@Component({
 selector: 'app-hero-detail',
 templateUrl: './hero-detail.component.html',
 changeDetection: ChangeDetectionStrategy.OnPush
})
export class VideoListComponent implements OnChanges {
 @Input() categoryId: string;
</code></pre>

blocks|key|2659826|text|Angular+ngOnChanges|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2659827|ngOnChanges()是一个内置的角度回调方法，如果至少有一个属性发生了更改，则在默认更改检测器检查数据绑定属性后立即调用该方法。在视图和内容之前，检查子项。|CODE|2659828|//+child.component.ts

import+{+Component,+OnInit,+Input,+SimpleChanges,+OnChanges+}+from+'@angular/core';

@Component({
++selector:+'app-child',
++templateUrl:+'./child.component.html',
++styleUrls:+['./child.component.css']
})
export+class+ChildComponent+implements+OnInit,+OnChanges+{

++@Input()+inputParentData:+any;

++constructor()+{+}

++ngOnInit():+void+{
++}

++ngOnChanges(changes:+SimpleChanges):+void+{
++++console.log(changes);
++}

}|code-block|syntax|javascript|2659829|更多信息：Angular+Docs|2659830|entityMap|0|LINK|mutability|MUTABLE|url|https://angular.io/api/core/OnChanges^0|0|J|0|0|D|0|0|5|C|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|10|8|@$9|11|A|12|B|H]]|D|@]|E|$]]|$1|I|3|J|5|K|7|13|8|@]|D|@]|E|$L|M]]|$1|N|3|O|5|6|7|14|8|@]|D|@$9|15|A|16|1|17]]|E|$]]|$1|P|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|Q|$R|$5|S|T|U|E|$V|W]]]]

Angular ngOnChanges
The <code>ngOnChanges()</code> is an inbuilt Angular callback method that is invoked immediately after the default change detector has checked data-bound properties if at least one has changed. Before the view and content, children are checked.
<pre class="lang-js prettyprint-override"><code>// child.component.ts

import { Component, OnInit, Input, SimpleChanges, OnChanges } from '@angular/core';

@Component({
 selector: 'app-child',
 templateUrl: './child.component.html',
 styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit, OnChanges {

 @Input() inputParentData: any;

 constructor() { }

 ngOnInit(): void {
 }

 ngOnChanges(changes: SimpleChanges): void {
 console.log(changes);
 }

}
</code></pre>
for more: <a href="https://angular.io/api/core/OnChanges" rel="noreferrer">Angular Docs</a>

I have a parent component (CategoryComponent), a child component (videoListComponent) and an ApiService.

I have most of this working fine i.e. each component can access the json api and get its relevant data via observables.

Currently video list component just gets all videos, I would like to filter this to just videos in a particular category, I achieved this by passing the categoryId to the child via <code>@Input()</code>.

CategoryComponent.html

<pre class="lang-xml prettyprint-override"><code>&lt;video-list *ngIf="category" [categoryId]="category.id"&gt;&lt;/video-list&gt;
</code></pre>

This works and when the parent CategoryComponent category changes then the categoryId value gets passed through via <code>@Input()</code> but I then need to detect this in VideoListComponent and re-request the videos array via APIService (with the new categoryId).

In AngularJS I would have done a <code>$watch</code> on the variable. What is the best way to handle this?

How to detect when an @Input() value changes in Angular?

集成开发环境

编译器

我有一个父组件(CategoryComponent)，，一个子组件(videoListComponent)和一个ApiService。我已经很好地完成了大部分工作，即每个组件都可以访问json api，并通过可观察对象获取相关数据。目前视频列表组件只获取所有视频，我想将其过滤为特定类别的视频，我通过@Input()将c...

问当@Input()值在Angular中发生变化时，如何检测？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当@Input()值在Angular中发生变化时，如何检测？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当@Input()值在Angular中发生变化时，如何检测？
EN