diff --git a/README.es-ES.md b/README.es-ES.md index d06cd7a..2448e8e 100644 --- a/README.es-ES.md +++ b/README.es-ES.md @@ -410,7 +410,7 @@ El mecanismo de detección de cambios de Angular se dispara gracias a [zone.js]( **Example** -En el ejemplo de abajo, puede ver un componente que utiliza esta práctica. Cuando el método `_incrementPoints` es llamado el componente comenzará a incrementar la propiedad `_points` cada 10ms (por defecto). Al incrementar tendremos la ilusión de una animación. Ya que en este caso no queremos activar el mecanismo de detección de cambios para todo el árbol de componentes, cada 10ms, podemos ejecutar `_incrementPoints` fuera del contexto de Angular´s Zone y actualizar el DOM manualmente (ver método set de `points`). +En el ejemplo de abajo, puede ver un componente que utiliza esta práctica. Cuando el método `#incrementPoints` es llamado el componente comenzará a incrementar la propiedad `#points` cada 10ms (por defecto). Al incrementar tendremos la ilusión de una animación. Ya que en este caso no queremos activar el mecanismo de detección de cambios para todo el árbol de componentes, cada 10ms, podemos ejecutar `#incrementPoints` fuera del contexto de Angular´s Zone y actualizar el DOM manualmente (ver método set de `points`). ```ts @Component({ @@ -420,22 +420,22 @@ class PointAnimationComponent { @Input() duration = 1000; @Input() stepDuration = 10; - @ViewChild('label') label: ElementRef; + @ViewChild('label') label!: ElementRef; @Input() set points(val: number) { - this._points = val; + this.#points = val; if (this.label) { this.label.nativeElement.innerText = this._pipe.transform(this.points, '1.0-0'); } } get points() { - return this._points; + return this.#points; } - private _incrementInterval: any; - private _points: number = 0; + #incrementInterval: any; + #points: number = 0; - constructor(private _zone: NgZone, private _pipe: DecimalPipe) {} + constructor(private _ngZone: NgZone, private _pipe: DecimalPipe) {} ngOnChanges(changes: any) { const change = changes.points; @@ -447,22 +447,22 @@ class PointAnimationComponent { } else { this.points = change.previousValue; this._ngZone.runOutsideAngular(() => { - this._incrementPoints(change.currentValue); + this.#incrementPoints(change.currentValue); }); } } - private _incrementPoints(newVal: number) { + #incrementPoints(newVal: number) { const diff = newVal - this.points; const step = this.stepDuration * (diff / this.duration); const initialPoints = this.points; - this._incrementInterval = setInterval(() => { + this.#incrementInterval = setInterval(() => { let nextPoints = Math.ceil(initialPoints + diff); if (this.points >= nextPoints) { - this.points = initialPoints + diff; - clearInterval(this._incrementInterval); + this.points = initialPoints + diff; + clearInterval(this.#incrementInterval); } else { - this.points += step; + this.points += step; } }, this.stepDuration); } diff --git a/README.ja-JP.md b/README.ja-JP.md index afd3553..2a479c9 100644 --- a/README.ja-JP.md +++ b/README.ja-JP.md @@ -452,9 +452,9 @@ Zone.jsのモンキーパッチは、ブラウザ内のすべての非同期API **例** 以下の小さなコードサンプルで、この方法を使ったコンポーネントの具体例を見ることができます。 -`_incrementPoints`メソッドが呼ばれると、コンポーネントは（基本的に）10ms毎に`_points`プロパティの増加を始めていきます。 +`#incrementPoints`メソッドが呼ばれると、コンポーネントは（基本的に）10ms毎に`#points`プロパティの増加を始めていきます。 値の増加はアニメーションのような錯覚をさせるでしょう。 -この時に、10msごとにコンポーネントツリー全体の変更検出メカニズムを起動したくないので、Angular Zoneのコンテキスト外で `_incrementPoints`を実行してDOMを手動で更新することができます。（`points` setter を参照） +この時に、10msごとにコンポーネントツリー全体の変更検出メカニズムを起動したくないので、Angular Zoneのコンテキスト外で `#incrementPoints`を実行してDOMを手動で更新することができます。（`points` setter を参照） ```ts @Component({ @@ -464,22 +464,22 @@ class PointAnimationComponent { @Input() duration = 1000; @Input() stepDuration = 10; - @ViewChild('label') label: ElementRef; + @ViewChild('label') label!: ElementRef; @Input() set points(val: number) { - this._points = val; + this.#points = val; if (this.label) { this.label.nativeElement.innerText = this._pipe.transform(this.points, '1.0-0'); } } get points() { - return this._points; + return this.#points; } - private _incrementInterval: any; - private _points: number = 0; + #incrementInterval: any; + #points: number = 0; - constructor(private _zone: NgZone, private _pipe: DecimalPipe) {} + constructor(private _ngZone: NgZone, private _pipe: DecimalPipe) {} ngOnChanges(changes: any) { const change = changes.points; @@ -491,20 +491,20 @@ class PointAnimationComponent { } else { this.points = change.previousValue; this._ngZone.runOutsideAngular(() => { - this._incrementPoints(change.currentValue); + this.#incrementPoints(change.currentValue); }); } } - private _incrementPoints(newVal: number) { + #incrementPoints(newVal: number) { const diff = newVal - this.points; const step = this.stepDuration * (diff / this.duration); const initialPoints = this.points; - this._incrementInterval = setInterval(() => { + this.#incrementInterval = setInterval(() => { let nextPoints = Math.ceil(initialPoints + diff); if (this.points >= nextPoints) { this.points = initialPoints + diff; - clearInterval(this._incrementInterval); + clearInterval(this.#incrementInterval); } else { this.points += step; } diff --git a/README.md b/README.md index 3870270..620542c 100644 --- a/README.md +++ b/README.md @@ -410,7 +410,7 @@ The Angular's change detection mechanism is being triggered thanks to [zone.js]( **Example** -In the snippet below, you can see an example for a component that uses this practice. When the `_incrementPoints` method is called the component will start incrementing the `_points` property every 10ms (by default). The incrementation will make the illusion of an animation. Since in this case, we don't want to trigger the change detection mechanism for the entire component tree, every 10ms, we can run `_incrementPoints` outside the context of the Angular's zone and update the DOM manually (see the `points` setter). +In the snippet below, you can see an example for a component that uses this practice. When the `#incrementPoints` method is called the component will start incrementing the `#points` property every 10ms (by default). The incrementation will make the illusion of an animation. Since in this case, we don't want to trigger the change detection mechanism for the entire component tree, every 10ms, we can run `#incrementPoints` outside the context of the Angular's zone and update the DOM manually (see the `points` setter). ```ts @Component({ @@ -420,20 +420,20 @@ class PointAnimationComponent { @Input() duration = 1000; @Input() stepDuration = 10; - @ViewChild('label') label: ElementRef; + @ViewChild('label') label!: ElementRef; @Input() set points(val: number) { - this._points = val; + this.#points = val; if (this.label) { this.label.nativeElement.innerText = this._pipe.transform(this.points, '1.0-0'); } } get points() { - return this._points; + return this.#points; } - private _incrementInterval: any; - private _points: number = 0; + #incrementInterval: any; + #points: number = 0; constructor(private _ngZone: NgZone, private _pipe: DecimalPipe) {} @@ -447,20 +447,20 @@ class PointAnimationComponent { } else { this.points = change.previousValue; this._ngZone.runOutsideAngular(() => { - this._incrementPoints(change.currentValue); + this.#incrementPoints(change.currentValue); }); } } - private _incrementPoints(newVal: number) { + #incrementPoints(newVal: number) { const diff = newVal - this.points; const step = this.stepDuration * (diff / this.duration); const initialPoints = this.points; - this._incrementInterval = setInterval(() => { + this.#incrementInterval = setInterval(() => { let nextPoints = Math.ceil(initialPoints + diff); if (this.points >= nextPoints) { this.points = initialPoints + diff; - clearInterval(this._incrementInterval); + clearInterval(this.#incrementInterval); } else { this.points += step; } diff --git a/README.pt-BR.md b/README.pt-BR.md index ead15a6..722f861 100644 --- a/README.pt-BR.md +++ b/README.pt-BR.md @@ -418,7 +418,7 @@ O Mecanismo de detecção de mudança do Angular é disparado graças ao [zone.j **Exemplo** -No snippet abaixo, você pode pode ver um exemplo de um componente que usa essa prática. Quando o método `_incrementarPontos` é chamado, o componente vai começar a incrementar a propriedade `_points` a cada 10ms ( por padrão). Ao incrementar teremos uma ilusão de uma animação. Como não queremos que o angular dispare o mecanismo de deteção de mudanças para toda a árvore do componente a cada 10ms, nós podemos rodar a função `_incrementarPontos` fora do contexto da Zona do Angular e atualizar o DOM manualmente (Veja o setter de `pontos`) +No snippet abaixo, você pode pode ver um exemplo de um componente que usa essa prática. Quando o método `#incrementarPontos` é chamado, o componente vai começar a incrementar a propriedade `#points` a cada 10ms ( por padrão). Ao incrementar teremos uma ilusão de uma animação. Como não queremos que o angular dispare o mecanismo de deteção de mudanças para toda a árvore do componente a cada 10ms, nós podemos rodar a função `#incrementarPontos` fora do contexto da Zona do Angular e atualizar o DOM manualmente (Veja o setter de `pontos`) ```ts @@ -427,53 +427,53 @@ No snippet abaixo, você pode pode ver um exemplo de um componente que usa essa }) class PointAnimationComponent { - @Input() duracao = 1000; - @Input() duracaoDoPasso = 10; - @ViewChild('label') label: ElementRef; + @Input() duration = 1000; + @Input() stepDuration = 10; + @ViewChild('label') label!: ElementRef; @Input() set points(val: number) { - this._pontos = val; + this.#points = val; if (this.label) { - this.label.nativeElement.innerText = this._pipe.transform(pontos, '1.0-0'); + this.label.nativeElement.innerText = this._pipe.transform(this.points, '1.0-0'); } } - get pontos() { - return this.pontos; + get points() { + return this.#points; } - private _intervaloDeIncremento: any; - private _pontos: number = 0; + #incrementInterval: any; + #points: number = 0; - constructor(private _zone: NgZone, private _pipe: DecimalPipe) {} + constructor(private _ngZone: NgZone, private _pipe: DecimalPipe) {} ngOnChanges(changes: any) { - const change = changes.pontos; + const change = changes.points; if (!change) { return; } if (typeof change.previousValue !== 'number') { - this.pontos = change.currentValue; + this.points = change.currentValue; } else { - this.pontos = change.previousValue; + this.points = change.previousValue; this._ngZone.runOutsideAngular(() => { - this._incrementarPontos(change.currentValue); + this.#incrementPoints(change.currentValue); }); } } - private _incrementarPontos(novoValor: number) { - const dif = novoValor - this.pontos; - const passo = this.duracaoDoPasso * (dif / this.duracao); - const pontosIniciais= this.pontos; - this._intervalorDeIncremento = setInterval(() => { - let proximosPontos = Math.ceil(pontosIniciais + dif); + #incrementPoints(newVal: number) { + const diff = newVal - this.points; + const step = this.stepDuration * (diff / this.duration); + const initialPoints = this.points; + this.#incrementInterval = setInterval(() => { + let nextPoints = Math.ceil(initialPoints + diff); if (this.points >= nextPoints) { this.points = initialPoints + diff; - clearInterval(this._intervalorDeIncremento); + clearInterval(this.#incrementInterval); } else { - this.pontos += passo; + this.points += step; } - }, this.duracaoDoPasso); + }, this.stepDuration); } } ``` diff --git a/README.ru-RU.md b/README.ru-RU.md index 3b15bab..cdf0c17 100644 --- a/README.ru-RU.md +++ b/README.ru-RU.md @@ -403,7 +403,7 @@ Server-side rendering решает эту проблему пре-рендери **Пример** -В отрывке кода далее, вы можете увидеть пример компонента с использованием данной практики. Когда метод `_incrementPoints` вызван, компонент начнет инкрементировать свойство `_points` каждые 10 мс (по умолчанию). Инкрементация создаст иллюзию анимации. Т.к. в данной ситуации мы не хотим вызывать проверку изменений для всего древа компонентов каждые 10 секунд, мы можем вызвать `_incrementPoints` вне контекста Angular Zone и обновить DOM вручную (`points` сеттер метод). +В отрывке кода далее, вы можете увидеть пример компонента с использованием данной практики. Когда метод `#incrementPoints` вызван, компонент начнет инкрементировать свойство `#points` каждые 10 мс (по умолчанию). Инкрементация создаст иллюзию анимации. Т.к. в данной ситуации мы не хотим вызывать проверку изменений для всего древа компонентов каждые 10 секунд, мы можем вызвать `#incrementPoints` вне контекста Angular Zone и обновить DOM вручную (`points` сеттер метод). ```ts @Component({ @@ -413,22 +413,22 @@ class PointAnimationComponent { @Input() duration = 1000; @Input() stepDuration = 10; - @ViewChild('label') label: ElementRef; + @ViewChild('label') label!: ElementRef; @Input() set points(val: number) { - this._points = val; + this.#points = val; if (this.label) { this.label.nativeElement.innerText = this._pipe.transform(this.points, '1.0-0'); } } get points() { - return this._points; + return this.#points; } - private _incrementInterval: any; - private _points: number = 0; + #incrementInterval: any; + #points: number = 0; - constructor(private _zone: NgZone, private _pipe: DecimalPipe) {} + constructor(private _ngZone: NgZone, private _pipe: DecimalPipe) {} ngOnChanges(changes: any) { const change = changes.points; @@ -440,20 +440,20 @@ class PointAnimationComponent { } else { this.points = change.previousValue; this._ngZone.runOutsideAngular(() => { - this._incrementPoints(change.currentValue); + this.#incrementPoints(change.currentValue); }); } } - private _incrementPoints(newVal: number) { + #incrementPoints(newVal: number) { const diff = newVal - this.points; const step = this.stepDuration * (diff / this.duration); const initialPoints = this.points; - this._incrementInterval = setInterval(() => { + this.#incrementInterval = setInterval(() => { let nextPoints = Math.ceil(initialPoints + diff); if (this.points >= nextPoints) { this.points = initialPoints + diff; - clearInterval(this._incrementInterval); + clearInterval(this.#incrementInterval); } else { this.points += step; } diff --git a/README.zh-CN.md b/README.zh-CN.md index 0517e03..835295d 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -404,7 +404,7 @@ Zone.js 通过猴子补丁的方法代理了所有浏览器的异步 APIs，并 在**极少情况**下，我们希望代码在 Angular 之外的上下文运行，所以不需要变更检测机制进行检查。这种情况下我们可以在组件中注入 `zone: NgZone` 服务，并且调用这个实例的 `runOutsizeAngular` 方法即可。 **例子** -在下面的代码片段中，您可以看到使用此实践的组件的示例。当调用 `_incrementPoints` 方法时，组件将开始每 10 ms 递增一次 `_points` 属性（默认情况下）。递增会造成动画的假象。因为在这种情况下，我们不希望触发整个组件树的更改检测机制，所以每 10 ms，我们可以在 Angular 区域的上下文之外运行 `incrementpoints`，并手动更新 DOM（请参见 `points` setter 访问器）。 +在下面的代码片段中，您可以看到使用此实践的组件的示例。当调用 `#incrementPoints` 方法时，组件将开始每 10 ms 递增一次 `#points` 属性（默认情况下）。递增会造成动画的假象。因为在这种情况下，我们不希望触发整个组件树的更改检测机制，所以每 10 ms，我们可以在 Angular 区域的上下文之外运行 `#incrementpoints`，并手动更新 DOM（请参见 `points` setter 访问器）。 ```ts @@ -415,22 +415,22 @@ class PointAnimationComponent { @Input() duration = 1000; @Input() stepDuration = 10; - @ViewChild('label') label: ElementRef; + @ViewChild('label') label!: ElementRef; @Input() set points(val: number) { - this._points = val; + this.#points = val; if (this.label) { this.label.nativeElement.innerText = this._pipe.transform(this.points, '1.0-0'); } } get points() { - return this._points; + return this.#points; } - private _incrementInterval: any; - private _points: number = 0; + #incrementInterval: any; + #points: number = 0; - constructor(private _zone: NgZone, private _pipe: DecimalPipe) {} + constructor(private _ngZone: NgZone, private _pipe: DecimalPipe) {} ngOnChanges(changes: any) { const change = changes.points; @@ -442,20 +442,20 @@ class PointAnimationComponent { } else { this.points = change.previousValue; this._ngZone.runOutsideAngular(() => { - this._incrementPoints(change.currentValue); + this.#incrementPoints(change.currentValue); }); } } - private _incrementPoints(newVal: number) { + #incrementPoints(newVal: number) { const diff = newVal - this.points; const step = this.stepDuration * (diff / this.duration); const initialPoints = this.points; - this._incrementInterval = setInterval(() => { + this.#incrementInterval = setInterval(() => { let nextPoints = Math.ceil(initialPoints + diff); if (this.points >= nextPoints) { this.points = initialPoints + diff; - clearInterval(this._incrementInterval); + clearInterval(this.#incrementInterval); } else { this.points += step; }