Question

我通过调用getInstance（）：

创建了一个ScoreBoard类作为全局对象

export class ScoreBoard{
    protected _myNumber : number;
    protected static scoreBoard : ScoreBoard;

    constructor(){
        this._myNumber=3;
    }
    get myNumber():number{
        return this._myNumber;
    }
    set myNumber(_myNumber : number){
        this._myNumber=_myNumber;
    }

    static getInstance() : ScoreBoard{
        if(!this.scoreBoard){
            this.scoreBoard=new ScoreBoard();
        }
        return this.scoreBoard;
    }
}

并尝试在html页面中调用它：

newscontent.ts

import { Component } from '@angular/core';
import { ScoreBoard } from '../scoreboard';

  @Component({
    templateUrl: 'newscontent.html'
  })
  export class NewsContent {
    constructor() {
  }
}

newscontent.html

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title></ion-title>
  </ion-navbar>
</ion-header>
<ion-content fullscreen="true">
    {{ScoreBoard.getInstance().myNumber}}
</ion-content>

但未能显示为错误：

1     689170   error    EXCEPTION: Error in ./NewsContent class NewsContent - inline template:8:31 caused by: undefined is not an object (evaluating 'self.context.ScoreBoard.getInstance')
2     689170   error    ORIGINAL EXCEPTION: undefined is not an object (evaluating 'self.context.ScoreBoard.getInstance')

。。

如何在.html中调用其他类的静态方法？

Answer 1

基本上你不能从模板中调用静态方法（ng2模板不是真正的html，而是将元语言转换为html）。

首先，您必须知道，您可以从组件模板访问的唯一内容是此实例的实例的方法和属性以及在模块中声明的ng2组件。您无法访问组件的静态属性，因为您无法访问该类但只能访问实例，并且您无法访问角度范围外的类，因为angular不会对其进行管理。

无论如何，根据您的需要，您可以通过多种方式实现自己的目标。

例如，我们可以想象在组件的类中声明一个调用静态方法的方法。

import { Component } from '@angular/core';
import { OtherClass } from '../otherclass';

@Component({
template: `
    <button (click)="callStaticMethod()">foo</button>
`
})
export class FooBarComponent {


    public callStaticMethod() {
        return OtherClass.staticMethod();
    }
}

即使这种方式有时很有用，但在你的情况下，没有必要这样做。如果我正确理解了您的代码，您需要一个可以在组件模板中使用的ScoreBoard实例。为了实现这一点，angular 2提供了另一个名为Injectable的装饰器。它为类添加了一些元数据，如果你将它声明为NgModule，Angular将通过Dependency注入系统为每个需要新创建服务的ng2对象提供一个实例。

在您的情况下，代码可能如下所示。

import { Injectable } from '@angular/core';

@Injectable()
export class ScoreBoard{
    protected _myNumber : number;

    constructor(){
        this._myNumber=3;
    }
    get myNumber():number{
        return this._myNumber;
    }
    set myNumber(_myNumber : number){
        this._myNumber=_myNumber;
    }
}



import { Component } from '@angular/core';
import { ScoreBoard } from '../scoreboard';

@Component({
templateUrl: 'newscontent.html'
})
export class NewsContent {
    // the attribute scoreBoard will be filled by angular thanks to the dependency injection
    constructor(public scoreBoard:ScoreBoard) {}

    ngOnInit() {
        // You can now use your service in the component's body
        this.scoreBoard.myNumber = 18;
    }
}


<ion-header>
    <ion-navbar>
        <button ion-button menuToggle>
            <ion-icon name="menu"></ion-icon>
        </button>
        <ion-title></ion-title>
    </ion-navbar>
</ion-header>
<ion-content fullscreen="true">
    <!-- or you can use it directly from the template via the NewContent's attribute *scoreBoard*-->
    {{scoreBoard.myNumber}}
</ion-content>

使用此方法，您可以在任何需要的地方访问您的服务，只需注入即可。但是要小心，Angular为需要它的每个ng2对象提供相同的服务实例，除非你有意提问它。我建议您查看文档以获取有关依赖注入系统的更多信息。

Answer 2

import { Component } from '@angular/core';
import { ScoreBoard } from '../scoreboard';

  @Component({
    templateUrl: 'newscontent.html'
  })
  export class NewsContent {

  scoreboardInstance = ScoreBoard.getInstance();

  constructor() {
  }
}

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title></ion-title>
  </ion-navbar>
</ion-header>
<ion-content fullscreen="true">
    {{scoreboardInstance.myNumber}}
</ion-content>

如何在.html（不是.ts）中调用其他类的静态方法？

2 个答案: