javascript - Angular 6コンポーネントインスタンスを指す「この」コンテキストを提供する方法は?

Question

D3 と JS に基づいて、地球儀で動作するデモがあります。今、そこから Angular 6 コンポーネントを作成しようとしています。

Angular を使用しない完全なデモは次のとおりです。

import * as d3 from 'd3v4';

import { Component, AfterContentInit, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'earth-globe',
  templateUrl: './earth-globe.component.html',
  styleUrls: ['./earth-globe.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class EarthGlobeComponent implements AfterContentInit {
  private canvas;
  getCountry(c) {
    console.log('Country is: ', c);
  }

  mousemove() {
    console.log('mousemove()::this==', this); // now 'this' points to canvas, which is CORRECT
    // console.log('globe==', globe);
    console.log('ev==', event); // but I also need event
    const c = this.getCountry(this); // and acces to this.getCountry
  }


  ngAfterContentInit() {
    this.canvas = d3.select('#globe');
    this.canvas
      .on('mousemove', this.mousemove)
  }
}

http://jsfiddle.net/up715k2n/

簡単な Angular コンポーネントのデモを次に示します。

https://stackblitz.com/edit/angular-dohwvt

マウスを動かすと、アプリは「これ」を console.log に記録します。どちらのデモでも、キャンバスを指している 'this' がありますが、これは正しいです。

しかし、Angular の例では、アプリにエラーがあります:

this.getCountry は関数ではありません

「getCountry」はキャンバスではなくコンポーネント メソッドであるためです。

そのため、キャンバスとコンポーネントの両方のコンテキストを取得する方法を見つけようとしています。

どうやってするの？

https://stackblitz.com/edit/angular-rlttwv?file=src/app/earth-globe.component.ts - コンポーネントを指す

https://stackblitz.com/edit/angular-xjahkl?file=src/app/earth-globe.component.ts - キャンバスを指す