0

在组件中读取流时，我无法分配变量。

import { Component, OnInit } from '@angular/core';
var fs: any = require('fs');

 @Component({
 selector: 'stream-cmp',
 templateUrl: 'app/view/stream.html',
 styleUrls: ['./app/view/stream.css'],
 })


 export class StreamCmp {

 private _anotherVariable:any = null;
 private readstream:any = null;
 private filePath:any = '/dir/file';

 public fileUpload():void {



    this.readstream =  fs.createReadStream(this.filePath, {start: 140, end:  160});

    this.readstream.on('data', function (text) {

     console.log(text);
     this.filePath = text;

    });

 }

基本上， this.filePath 从未分配过，我从未在视图中看到它。但是 console.log 总是有效的。

我是否使用某种更改检测（可能是 changedetectionref，因为它应该比 NgZone 快）？既然它是一个流，我们会立即获得所有这些吗？它是异步流吗？我应该调用 fs 模块上的属性来将数据写入变量吗？似乎 fs 模块上的管道功能旨在写入文件或其他流。

4

1 回答 1

2

您应该使用arrow函数来访问函数内部的当前上下文。仅更改此设置不会解决您的问题。

目前，您在data（自定义）事件上连接了一些函数，用于从文件流接收数据。因此，在这种情况下，变更检测系统不会知道任何组件绑定中的某些内容发生了变化。这就是为什么在这种情况下您必须手动运行更改检测来更新bindings页面。您需要添加private ref: ChangeDetectorRef组件构造函数，这将使您可以使用更改检测器参考对象。接下来，您将调用this.ref.detectChanges()方法来手动运行区域以检查和更新页面上的绑定。

代码 

this.readstream.on('data', (text) => { // changed here to use arrow function.
 console.log(text);
 this.filePath = text; //this.filePath will be the component variable which has been declared
   this.ref.detectChanges(); //will trigger change detection system manually.
});

变化检测

Zone 是变更检测系统的核心，它会在内部对几乎所有事件进行修补，例如setTimeout、setInterval、 DOM 事件等，当您触发它们时，它会自动运行变更检测系统，以在这些事件被调用时执行。如果您有任何不适合此列表的自定义事件，那么您必须手动触发更改检测系统以使所有绑定同步。

还有其他几种手动运行更改检测的方法，您可以在@Mark Rajcok的这个答案中找到它

于 2016-07-20T18:54:47.977 回答