Búsqueda de sitios web

typescript - Error "TypeError: ... no es una función" al intentar usar una función de componente en la plantilla

Tengo un componente como el siguiente y estoy tratando de proporcionar las dimensiones de viewBox de mi SVG de forma dinámica, inyectadas desde mi bootstrap en 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}`;
    }
}

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

Y la excepción que obtengo

EXCEPCIÓN: TypeError: l_context.getViewBox no es una función en [getViewBox() en AppComponent@1:13]

No estoy seguro de que sea una buena manera de hacer esto, pero esta información es necesaria en otros lugares de mi servicio de círculos. Una cosa que no me gusta, sin embargo, es que no puedo especificar el tipo Number, así que tengo que definir static parameters=[Circles, 'canvasWidth', 'canvasHeight']; en AppComponent.

Respuesta #1

Elimina function de la declaración de tu método, se verá como abajo.

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

Básicamente, lo que ocurre detrás de escena es que cuando escribes un método de clase con function, el JavaScript transpilado saca esa function fuera de esa función del prototipo devuelta con el nombre de la clase. Por eso se vuelve inaccesible.

En este caso tendrías un error en la compilación, si estás usando typescript con una mejor herramienta como Visual Studio/Web Storm.

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

Compilado como

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

Enlace de código

Artículos relacionados