Javascript angular 2 一次性绑定
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34375624/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
angular 2 one time binding
提问by Miquel
In angular 1 we could do one time binding in this way: {{ ::myFunction() }}.
在角1我们可以做一次以这种方式结合：{{ ::myFunction() }}。
In angular 2 this is throwing:
在角度 2 中，这是抛出：
EXCEPTION: Template parse errors:
Parser Error: Unexpected token : at column 2 in [{{ ::consent(false, undefined, box) }}] in CookieConsent@5:29 ("ull-right" href="" (click)="consent(true, $event, box)">De acuerdo</a>
<span class="hidden">[ERROR ->]{{ ::consent(false, undefined, box) }}</span>
How can we do one time binding in angular2?
我们如何在 angular2 中进行一次绑定？
采纳答案by Miquel
ChangeDetectionStrategy.CheckOnceis the solution for this problem.
ChangeDetectionStrategy.CheckOnce是这个问题的解决方案。
Some info here:
这里的一些信息：
回答by m e
I found solution for one time binding in angular 2 here: https://github.com/angular/angular/issues/14033
我在这里找到了一次在 angular 2 中绑定的解决方案：https: //github.com/angular/angular/issues/14033
I created this directive:
我创建了这个指令：
import { Directive, TemplateRef, ViewContainerRef, NgZone } from "@angular/core";
@Directive({
selector: '[oneTime]',
})
export class OneTimeDirective {
constructor(template: TemplateRef<any>, container: ViewContainerRef, zone: NgZone) {
zone.runOutsideAngular(() => {
const view = container.createEmbeddedView(template);
setTimeout(() => view.detach());
})
}
}
And used it:
并使用它：
<some-selector *oneTime [somePropertyToOneTimeBinding]="someValueToOneTimeBinding"></some-selector>
For example:
例如：
<iframe *oneTime [src]="myUrl"></iframe>
回答by Jigar
Currently, you cannot do one time binding with Angular 2. However, you can know when your binding changes and reset your inputs.
目前，您无法使用 Angular 2 进行一次绑定。但是，您可以知道绑定何时更改并重置您的输入。
Angular 2 provides OnChanges lifecycle hook for the same. You need to implement OnChanges interface to get the changes.
Angular 2 为其提供了 OnChanges 生命周期钩子。您需要实现 OnChanges 接口以获取更改。
See the code example below where, I am storing the data-bound property in a private variable when OnInit is called.
请参阅下面的代码示例，其中在调用 OnInit 时将数据绑定属性存储在私有变量中。
export class Footer implements OnInit, OnChanges {
@Input() public name: string;
private privname: string;
constructor() { }
ngOnInit() {
this.privname = this.name;
}
ngOnChanges(changes: { [key: string]: SimpleChange }): void {
if (!changes["name"].isFirstChange()) {
this.name = this.privname;
}
}
}
Later when other changes occur, I am setting the value to its old value on subsequent changes.
稍后当发生其他更改时，我将在后续更改时将该值设置为其旧值。
This mechanism works like One-time binding.
这种机制的工作原理类似于一次性绑定。
Alternate solutions: You could also use a setter function to capture the changes.
替代解决方案：您还可以使用 setter 函数来捕获更改。
回答by eav
ChangeDetectionStrategy.CheckOnce is the solution for this problem.
ChangeDetectionStrategy.CheckOnce 是这个问题的解决方案。
This has been updated to OnPushsee also comment in code:
这已更新以OnPush查看代码中的注释：
export declare enum ChangeDetectionStrategy {
/**
* `OnPush` means that the change detector's mode will be set to `CheckOnce` during hydration.
*/
OnPush = 0,
/**
* `Default` means that the change detector's mode will be set to `CheckAlways` during hydration.
*/
Default = 1,
}
回答by Abdeali Chandanwala
Since one time read/bind isnt possible by default in angular, I think writing a public getter function will solve the issue.
由于默认情况下无法在 angular 中读取/绑定一次，我认为编写公共 getter 函数将解决该问题。
For example
例如
public getValue():number {
return mynumber ? mynumber : 25; // if mynumber is not undefined the mynumber else return 25
}
//In html template
<input type="range" min="getValue()" max="100">
This will work perfectly if the getter function is able to reply back before the template rendering takes place. So the initialization of mynumber would be great if done in ngOnInit() function
如果 getter 函数能够在模板渲染发生之前回复，这将完美地工作。所以如果在 ngOnInit() 函数中完成 mynumber 的初始化会很棒
