Question

我有一个组件如下，我正在尝试动态提供我的svg viewBox维度，从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}`;
    }
}

我的主要内容

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})
]);

我得到的例外

EXCEPTION：TypeError：l_context.getViewBox不是函数 [AppComponent @ 1：13中的getViewBox（）]

我不确定这是做这件事的好方法，但我的circles.service中的其他地方需要这些信息。但我不喜欢的一件事是我无法指定数字类型，所以我必须定义静态参数= [Circles，＆＃39; canvasWidth＆＃39;，＆＃39; canvasHeight＆＃39;] ; 在AppComponent中。

Answer 1

从方法声明中删除function，它将如下所示。

getViewBox(): String {
    return `0 0 ${this.width} ${this.height}`;
}

基本上在场景背后发生的是当你使用function编写类方法时，转换后的JavaScript会在类名称返回的原型函数之外抛出function。这就是它无法到达的原因。

在这种情况下，如果您使用typescript和更好的工具（如Visual Studio / Web Strom），则在编译时会出现错误。

export class App{
    function test(){
        console.log();
    }
}

透明为

"use strict";
var App = (function () {
    function App() {
    }
    return App;
}());
exports.App = App;
function test() {
    console.log();
}

Code Link

错误＆＃34; TypeError：...不是函数＆＃34;当试图在模板中使用组件功能时

1 个答案: