Angular2 Router

Question

私はAngular2を試しています（onlinetutorialに従ってください）。 しかし、私はルーターでナビゲートする際に問題があります。私component.ts内部

：

<a (click)="foo()">test</a> 

（ジャストナビゲーション機能をテストします。）

onMapClick機能：

foo() { 
    this.router.navigate(['/myroute']); 
    } 

    onMapClick(e) { 
    this.router.navigate(['/myroute']); 
    } 

fooが（）からトリガされますリーフレットからのクリックイベントです。私は地図をクリックすることができ、機能のトリガー。 しかし、私は得る：

EXCEPTION: Cannot read property 'navigate' of undefined 
ErrorHandler.handleError @ error_handler.js:54 
next @ application_ref.js:348 
schedulerFn @ async.js:93 
SafeSubscriber.__tryOrUnsub @ Subscriber.js:234 
SafeSubscriber.next @ Subscriber.js:183 
Subscriber._next @ Subscriber.js:125 
Subscriber.next @ Subscriber.js:89 
Subject.next @ Subject.js:55 
EventEmitter.emit @ async.js:79 
NgZone.triggerError @ ng_zone.js:333 
onHandleError @ ng_zone.js:294 
ZoneDelegate.handleError @ zone.js:334 
Zone.runTask @ zone.js:169 
ZoneTask.invoke @ zone.js:416 
error_handler.js:59 ORIGINAL STACKTRACE: 
ErrorHandler.handleError @ error_handler.js:59 
next @ application_ref.js:348 
schedulerFn @ async.js:93 
SafeSubscriber.__tryOrUnsub @ Subscriber.js:234 
SafeSubscriber.next @ Subscriber.js:183 
Subscriber._next @ Subscriber.js:125 
Subscriber.next @ Subscriber.js:89 
Subject.next @ Subject.js:55 
EventEmitter.emit @ async.js:79 
NgZone.triggerError @ ng_zone.js:333 
onHandleError @ ng_zone.js:294 
ZoneDelegate.handleError @ zone.js:334 
Zone.runTask @ zone.js:169 
ZoneTask.invoke @ zone.js:416 
ETC.. 

は、これらの機能は、お互いの後に右です...なぜ1つの作業を行いますが、他ではありませんか？

私はイベントをトリガ場所です：

constructor(
    private router: Router 
) { } 

    ngOnInit() { 
    this.drawMap(); 
    } 

    drawMap() { 
    var map = L.map('map').setView([0, 0], 3); 

    L.tileLayer('maptiles/{z}/{x}/{y}.png', { 
     minZoom: 3, 
     maxZoom: 4, 
     continuousWorld: false, 
     noWrap: true, 
     crs: L.CRS.Simple, 
    }).addTo(map); 

    map.on('click', this.onMapClick); 
    } 

Answer 1

を使用することができるようにするためにルータを注入する必要がありますあなたのコンポーネント。クリックイベントを参照していますが、イベントにはrouterプロパティがありません。したがって、this.routerはundefinedになります。

変更：

map.on('click', this.onMapClick.bind(this)); 

または

map.on('click',()=>{this.onMapClick();}); 

Answer 2

onMapClick関数の内部で、thisがに参照のうえされていないので、あなたはそれを

constructor(private router:Router) {}