typescript 尝试在模板中使用组件函数时出现错误“TypeError: ... is not a function”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35819954/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Error "TypeError: ... is not a function" when trying to use a component function in template
提问by JCorriveau
I have a component as following and I am trying to provide my svg viewBox dimension dynamically, injected from my bootstrap in main.ts.
我有一个组件如下，我试图动态提供我的 svg viewBox 维度，从我的 bootstrap 注入到 main.ts。
import {Component} from 'angular2/core';
import {CircleComponent} from './circle.component';
import {Circles} from './circles.service';
@Component({
selector: 'my-app',
styleUrls: ['./app/app.component.css'],
directives: [CircleComponent],
providers: [Circles],
template: `
<svg [attr.viewBox]="getViewBox()" preserveAspectRatio="xMidYMid meet">
<svg:g my-circle *ngFor="#circle of circles.circles" [circle]="circle" />
</svg>
`
})
export class AppComponent{
static parameters = [Circles, 'canvasWidth', 'canvasHeight'];
constructor(circles: Circles, canvasWidth: Number, canvasHeight: Number) {
this.circles = circles;
this.width = canvasWidth;
this.height = canvasHeight;
}
function getViewBox(): String {
return `0 0 ${this.width} ${this.height}`;
}
}
My main.ts
我的 main.ts
import {provide} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
bootstrap(AppComponent, [
provide('canvasWidth', {useValue: 900}),
provide('canvasHeight', {useValue: 300})
]);
And the exception I get
我得到的例外
EXCEPTION: TypeError: l_context.getViewBox is not a function in [getViewBox() in AppComponent@1:13]
例外：TypeError：l_context.getViewBox 不是 [getViewBox() in AppComponent@1:13] 中的函数
I'm not sure it's a good way to do this thing, but this information is needed elsewhere in my circles.service. One thing I don't like though is that I cannot specify the Number type so I have to define static parameters = [Circles, 'canvasWidth', 'canvasHeight'];in AppComponent.
我不确定这是做这件事的好方法，但是我的 circles.service 的其他地方需要这些信息。我不喜欢的一件事是我不能指定 Number 类型，所以我必须定义静态参数 = [Circles, 'canvasWidth', 'canvasHeight']; 在 AppComponent 中。
采纳答案by Pankaj Parkar
Remove functionfrom your method declaration, It will look like below.
function从您的方法声明中删除，它将如下所示。
getViewBox(): String {
return `0 0 ${this.width} ${this.height}`;
}
Basically what happen behind the scene is when you write class method with function, transpiled JavaScript throw that functionoutside of that prototype function returned by the name of class. That's why it become unreachable.
基本上在幕后发生的事情是，当您使用 编写类方法时function，转换后的 JavaScript 将其抛出到function由类名返回的原型函数之外。这就是为什么它变得遥不可及。
In this case you would have get error at compile, if you are using typescriptwith better tool like Visual Studio/Web Strom.
在这种情况下，如果您使用typescript更好的工具（如 Visual Studio/Web Strom），您将在编译时出错。
export class App{
function test(){
console.log();
}
}
Transpiled As
转译为
"use strict";
var App = (function () {
function App() {
}
return App;
}());
exports.App = App;
function test() {
console.log();
}
