如何从同一个Angular(Typescript)组件类中的另一个方法调用一个方法?

时间:2017-05-25 23:54:25

标签: javascript angular

我看到一个奇怪的错误,我尝试从另一个方法调用一个方法,并且两个方法都在相同的Angular 2 TypeScript组件中。

在下面的代码中看到,当调用ngOnInit()时,它会启动method1。 method1尝试调用this.method2()。这就是问题所在。 出现的错误如下: 错误:无法读取未定义

的属性'method2'

为什么这个对象未定义?我怎样才能解决这个问题,以便我可以像使用Java这样的语言从同一个类中的其他方法调用属于类的方法?

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

@Component({
  selector: 'my-dashboard',
  moduleId: module.id,
  templateUrl: './dashboard.component.html',
  styleUrls: [ './dashboard.component.css' ]
})
export class DashboardComponent implements OnInit {

  constructor() {
  }

  ngOnInit(): void {
    this.method1();
  };

  method1(): void {
   this.method2();
  };

  method2(]): void {
    console.log("hi");
  }
}

2 个答案:

答案 0 :(得分:0)

我在这个Plunker中复制了您的确切代码(但从method2的参数中删除了异常的']'并且它工作正常。我也添加了一个按钮,可以多次调用Method1()。

我的建议是,从您的组件元数据中删除moduleId: module.id,然后重试。即使是Plunker也不会在那里工作。

更新:

“删除了所有提及的moduleId。”组件相对路径“cookbook deleted(2017-03-13)” - https://angular.io/docs/ts/latest/guide/change-log.html

app.ts:

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <button (click)="method1()">Invoke Method 1</button>
    </div>
  `,
})

export class App implements OnInit{
  name:string;
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }

  ngOnInit(): void {
    this.method1();
  };

  method1(): void {
   this.method2();
  };

  method2(): void {
    alert("hi");
  }

}

答案 1 :(得分:-1)

这不可运行,所以我不能自己测试这个解决方案,但尝试将函数重命名为“this.method2”而不仅仅是“method2”。