javascript - 为什么 Angular 2 的模板无法从 Angular 区域之外的调用进行更新？

Question

我想我应该创建一个非常简单的登录表单，其中包含组件绑定(bind)的用户名和密码属性，该表单将通过以下步骤运行:

1. 通过 fetch() 调用提交凭据
2. 然后获取 Response 结果对象的 JSON 内容
3. 然后检查服务器端检查结果的内容

如果凭据错误，它会更改一个组件属性，该属性会告诉 Angular 将一个类应用于用户名和密码输入，使它们暂时变为红色(使用 setTimeout 将其更改回来)

我遇到的问题是 Angular 无法正确应用该类，我不确定为什么。我决定创建一个简化的测试项目来缩小问题范围，最终导致包含 system-polyfills/when.js。

此代码依次执行 1、2、3，并将其设置在组件属性中并将其输出到调试控制台。除非包含 system-polyfill，否则 Angular 会正确渲染组件属性，在这种情况下，它将停止在 1 并且永远不会将其更改为 2 或 3，即使控制台显示该属性实际上已更改:

export class App {
    private stateIndicator:string = "0";

    public showState(state:string) {
        console.log('State: ' + state);
        this.stateIndicator = state;

    }

    public showFetchProblem() {
        this.showState('1')
        fetch('http://www.google.com/robots.txt',{mode:'no-cors'}).then((response:any) => {
            this.showState('2')
            response.text().then((value) => {
                this.showState('3')
            });
        });
    }
}

我创建了以下 Plunker 来演示此行为:http://plnkr.co/edit/GR9U9fTctmkSGsPTySAI?p=preview

是的，明显的解决方案是:

1. 不要手动包含系统填充，或者
2. 如果需要，请在 SystemJS 之前手动添加不同的 Promise polyfill

但我仍然很好奇为什么会发生这种情况，希望有人能对此有所了解(并可能有助于解决基本问题)。

编辑:本文的原始标题是为什么 Angular 2 的模板渲染在使用 system-polyfills (when.js) 时表现不佳。感谢 Thierry 和 Günter 的贡献并指出 Angular 2 对区域的使用在这里发挥了作用。对于将来遇到这种情况的任何人，这里有两篇优秀的文章，它们更详细地解释了区域，并且在您遇到这种情况时将增强您对这种情况的理解:

1. http://blog.thoughtram.io/angular/2016/01/22/understanding-zones.html
2. http://blog.thoughtram.io/angular/2016/02/01/zones-in-angular-2.html

Answer 1

Promise polyfill 提供了 Promise 的自定义实现，它似乎是在 Angular2 范围之外执行的(即不在区域中)。

如果您在 Angular2 管理的区域内显式执行代码(使用 NgZone 类)，则在包含 system-polyfill.js 文件时它会起作用。

这是一个示例:

constructor(private zone:NgZone) {}

public showFetchProblem() {
  this.showState('1')
  this.zone.run(() => {
    fetch('http://www.google.com/robots.txt',{mode:'no-cors'}).then((response:any) => {
      this.showState('2')
      response.text().then((value) => {
        this.showState('3')
      });
    });
  });
}

查看相应的plunkr:http://plnkr.co/edit/EJgZKWVx6FURrelMEzN0?p=preview .