angularjs - Angular 1.5 $onInit fungerar inte - typescript


Jag försöker konvertera delar av en Angular 1.5-applikation till TypeScript. Jag får inga felmeddelanden men $onInit()-metoden körs inte längre. Jag inkluderar min kod som fungerar (JavaScript) och den kod som inte fungerar (TypeScript)

Javascript-version (fungerande):

angular
    .module('app')
    .component('appProductList', {
        templateUrl: '/src/product-list/product-list.component.html',
        controller: ProductListController
    });

function ProductListController($location, ProductService) {
    var ctrl = this;

    ctrl.$onInit = init;
    ctrl.selectProduct = selectProduct;

    function init(){
        ctrl.products = [];

        ProductService.getProducts()
            .then(res => {
                ctrl.products = res.data;
            }, error => console.log(error));
    }

    function selectProduct(product){
        $location.path('/product/' + product.id);
    }
}

TypeScript-version ($onInit utlöses aldrig):

angular
    .module('app')
    .component('appProductList', {
        templateUrl: '/src/product-list/product-list.component.html',
        controller: ProductListController
    });

class ProductListController{
    products: Array<Product>;

    constructor(private $location: ng.ILocationService, 
                private ProductService: ProductService) {}

    $onInit() {
        this.products = new Array<Product>();

        this.ProductService.getProducts()
            .then((res: ng.IHttpPromiseCallbackArg<Array<Product>>) => {
                this.products = res.data;
            }, error => console.log(error));
    } 

    selectProduct(product){
        this.$location.path('/product/' + product.id);
    }
} 

Svar #1

Svara, klasser hoistas inte, därför måste de deklareras innan de refereras.

Från MDN-dokumentationen:

Hoisting: En viktig skillnad mellan funktionsdeklarationer och klassdeklarationer är att funktionsdeklarationer hoistas medan klassdeklarationer inte gör det. Du måste först deklarera din klass och sedan använda den, annars kommer kod som följande att ge ett ReferenceError:

MDN: Klasser

Relaterade artiklar