typescript - Fel "TypeError: ... är inte en funktion" när man försöker använda en komponentfunktion i en mall

Jag har en komponent enligt följande och jag försöker ge min SVG viewBox-dimension dynamiskt, injicerad från min bootstrap i 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}`;
    }
}

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

Och undantaget jag får

UNDANTAG: TypeError: l_context.getViewBox är inte en funktion i [getViewBox() i AppComponent@1:13]

Jag är inte säker på att det är ett bra sätt att göra det här, men den här informationen behövs på andra ställen i mitt circles.service. En sak jag inte gillar är dock att jag inte kan ange Number-typen, så jag måste definiera static parameters=[Circles, 'canvasWidth', 'canvasHeight']; i AppComponent.

Svar #1

Ta bort function från din metoddeklaration, det kommer att se ut som nedan.

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

I princip vad som händer bakom kulisserna är att när du skriver en klassmetod med function, kastar transpilerad JavaScript den function utanför den prototypfunktion som returneras med klassens namn. Det är därför den blir oåtkomlig.

I det här fallet skulle du få ett fel vid kompilering om du använder typescript med ett bättre verktyg som Visual Studio/Web Storm.

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

Transpilerad som

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

Kodlänk

Relaterade artiklar