Angular 4路由器返回undefined

我尝试使用Router.navigate({})创建一个函数

导入路由器：

import { Router }   from '@angular/router';

具有函数和构造函数的类：

 export class HomeComponent implements OnInit {
  constructor(private router:Router,private renderer: Renderer2,public but2: ElementRef, public but1: ElementRef) {
  }

  ngOnInit() {
  }
  nvgt(lc){
    this.router.navigate([ lc ]);
  }
  navigator(loc) {
  this.renderer.setStyle(this.but1.nativeElement.querySelector('#but1'),'animation','fadeoutdown 1s both');
  this.renderer.setStyle(this.but2.nativeElement.querySelector('#but2'),'animation','fadeoutup 1s both');
  window.setInterval(this.nvgt,1500,loc)
  }
}

组件HTML（2个按钮）：

<button #but1 id="but1" (click)="navigator('/questions')" mat-raised-button>Search for my next phone</button>
<hr data-content="OR">
<button #but2 id="but2" (click)="navigate('/inputphone')" mat-raised-button>Search specific phone</button>

当我单击控制台中发现的下一个错误时：

ERROR TypeError: Cannot read property 'navigate' of undefined
    at HomeComponent.nvgt (webpack-internal:///../../../../../src/app/home/homeponent.ts:25)
    at ZoneDelegate.invokeTask (webpack-internal:///../../../../zone.js/dist/zone.js:421)
    at Object.onInvokeTask (webpack-internal:///../../../core/esm5/core.js:4940)
    at ZoneDelegate.invokeTask (webpack-internal:///../../../../zone.js/dist/zone.js:420)
    at Zone.runTask (webpack-internal:///../../../../zone.js/dist/zone.js:188)
    at ZoneTask.invokeTask (webpack-internal:///../../../../zone.js/dist/zone.js:495)
    at ZoneTask.invoke (webpack-internal:///../../../../zone.js/dist/zone.js:484)
    at timer (webpack-internal:///../../../../zone.js/dist/zone.js:2065)

你已经失去了对this的引用，这是JS中许多人的典型问题。改变这一行：

window.setInterval(this.nvgt,1500,loc)

至

window.setInterval(() => this.nvgt(loc),1500)

你看，lambdas没有上下文，不像典型的js函数（你在代码中传递一个方法的引用），而是坚持它们被调用的上下文（一个类或另一个函数）。

Angular 4路由器返回undefined

我尝试使用Router.navigate({})创建一个函数

导入路由器：

import { Router }   from '@angular/router';

具有函数和构造函数的类：

 export class HomeComponent implements OnInit {
  constructor(private router:Router,private renderer: Renderer2,public but2: ElementRef, public but1: ElementRef) {
  }

  ngOnInit() {
  }
  nvgt(lc){
    this.router.navigate([ lc ]);
  }
  navigator(loc) {
  this.renderer.setStyle(this.but1.nativeElement.querySelector('#but1'),'animation','fadeoutdown 1s both');
  this.renderer.setStyle(this.but2.nativeElement.querySelector('#but2'),'animation','fadeoutup 1s both');
  window.setInterval(this.nvgt,1500,loc)
  }
}

组件HTML（2个按钮）：

<button #but1 id="but1" (click)="navigator('/questions')" mat-raised-button>Search for my next phone</button>
<hr data-content="OR">
<button #but2 id="but2" (click)="navigate('/inputphone')" mat-raised-button>Search specific phone</button>

当我单击控制台中发现的下一个错误时：

ERROR TypeError: Cannot read property 'navigate' of undefined
    at HomeComponent.nvgt (webpack-internal:///../../../../../src/app/home/homeponent.ts:25)
    at ZoneDelegate.invokeTask (webpack-internal:///../../../../zone.js/dist/zone.js:421)
    at Object.onInvokeTask (webpack-internal:///../../../core/esm5/core.js:4940)
    at ZoneDelegate.invokeTask (webpack-internal:///../../../../zone.js/dist/zone.js:420)
    at Zone.runTask (webpack-internal:///../../../../zone.js/dist/zone.js:188)
    at ZoneTask.invokeTask (webpack-internal:///../../../../zone.js/dist/zone.js:495)
    at ZoneTask.invoke (webpack-internal:///../../../../zone.js/dist/zone.js:484)
    at timer (webpack-internal:///../../../../zone.js/dist/zone.js:2065)

你已经失去了对this的引用，这是JS中许多人的典型问题。改变这一行：

window.setInterval(this.nvgt,1500,loc)

至

window.setInterval(() => this.nvgt(loc),1500)

你看，lambdas没有上下文，不像典型的js函数（你在代码中传递一个方法的引用），而是坚持它们被调用的上下文（一个类或另一个函数）。