Live Plunker

Question

我有一个使用的应用程序：

Angular 2
GoJS for visualization

它包括：

父组件： src/app/search.component.ts

它包含一个搜索栏和一些对服务器的API调用将显示按钮的区域。
子组件： src/app/search-details.component.ts

它由一个显示GoJS Radial Layout Diagram

<div>

在子组件的SearchDetailsComponent类中有一个名为nodeClicked的简单函数，如下所示：

nodeClicked(e, node) {
  // show the name of the clicked node on the console
  console.log(node.data.text);
  this.checkString = node.data.text // HERE is the ERROR....
}

每次渲染图表并且用户点击任何节点时，都会出现错误：

TypeError：这是未定义的

Stack-Trace:
execute/SearchDetailsComponent</SearchDetailsComponent.prototype.nodeClicked@http://run.plnkr.co/L7H44HHRrMceJAkj/src/app/search-details.component.ts!transpiled:96:21
Vh@https://unpkg.com/gojs/release/go-debug.js:539:43
Vg.prototype.standardMouseClick@https://unpkg.com/gojs/release/go-debug.js:537:201
ek.prototype.doMouseUp@https://unpkg.com/gojs/release/go-debug.js:667:73
E.prototype.doMouseUp@https://unpkg.com/gojs/release/go-debug.js:802:92
Ll/a.no@https://unpkg.com/gojs/release/go-debug.js:1012:149
ZoneDelegate.prototype.invokeTask@https://unpkg.com/zone.js/dist/zone.js:424:17
onInvokeTask@https://unpkg.com/@angular/core/bundles/core.umd.js:3956:28
ZoneDelegate.prototype.invokeTask@https://unpkg.com/zone.js/dist/zone.js:423:17
Zone.prototype.runTask@https://unpkg.com/zone.js/dist/zone.js:191:28
ZoneTask/this.invoke@https://unpkg.com/zone.js/dist/zone.js:486:28

它所引用的this是checkString变量在类SearchDetailsComponent中声明的那个。

如何识别checkString？我在上面定义了它。此错误会一直显示 API服务我希望每次点击该节点时都会调用此错误，并且也会调用 HTTP GET 。

我在这里做错了什么？

Live Plunker

Embed Plunker

Answer 1

Node.click 属性是一个在不绑定this的情况下调用的函数。

如果需要从事件处理程序中访问外部组件，您当然可以指定一个闭包的nodeClicked函数。

Answer 2

正如@WalterNorthwoods的回答所暗示的那样。我为Node.click创建了一个内联函数，如下所示：

click: (e: go.InputEvent, obj: go.GraphObject) => { this.nodeClicked(e, obj); }

nodeClicked函数现在可以调用，并且this.checkString值显示得非常完美。

使用GoJS在Angular 2打字稿的函数中无法识别Class的变量

Live Plunker

Embed Plunker

2 个答案: