$ onInit没有被TypeScript angularjs控制器调用

Question

在下面的Controller中，从未调用$ onInit（）。请让我知道如何确保$ onInit被调用。我需要为此控制器绑定$ onInit吗？

我是否需要将$ onInit绑定到此对象，而不是将其作为类级别的函数。

import * as angular from "angular";
import { IChangePasswordService } from '../../partials/ChangePassword/IChangePasswordService'


declare var module: any;
declare var require: any;
export interface IEmailChangePassword extends ng.IScope {
    initialPasswordChange: Function;
 }

export class EmailChangePasswordController implements ng.IOnInit {

    static $inject = ["$scope", "$mdDialog", "$timeout", "$location", "$state", "ChangePasswordService","common.svcs.modalService"];
    $mdDialog: any;
    $timeout: any;
    state: string = 'getInput';
    $scope: IEmailChangePassword;
    modalService: any;
    ChangePasswordService: IChangePasswordService;
    $location: ng.ILocationService;
    $state: any;

    constructor($scope: IEmailChangePassword, $mdDialog: any, $timeout: any, $location: ng.ILocationService, $state: any, ChangePasswordService: IChangePasswordService, modalService:any) {
        this.$mdDialog = $mdDialog;
        this.$scope = $scope;
        $scope.initialPasswordChange = this.initialPasswordChange.bind(this);
        this.$timeout = $timeout;
        this.modalService = modalService;
        this.ChangePasswordService = ChangePasswordService;
        this.$location = $location;
        this.$state=$state;
    }


    $onInit(): void {
       console.log("inside On Init");
    }


    public initialPasswordChange(): void {
       ...

    }
}

module.exports = function (app) {
    app.controller("EmailChangePasswordController", EmailChangePasswordController);
}

我在这里用angularjs使用Typescript。提前非常感谢您。

Answer 1

$ onInit是AngularJS中组件生命周期的钩子。

https://docs.angularjs.org/guide/component

当您将此控制器分配给一个组件并在某个地方使用该组件时，它将触发。

您应该具有以下组件：

export class EmailChangePasswordComponent {
    controller = EmailChangePasswordController;
    templateUrl = "email-change-password.html";
}

您应该注册它：

app.component("emailChangePassword", EmailChangePasswordComponent)

您可以将此组件分配给配置状态：

$stateProvider.state("stateName", {
    url: "/stateUrl",
    component: "emailChangePassword"
});

或者只是在html中使用：

<email-change-password></email-change-password>

$ onInit将在初始化状态或呈现组件时触发。

构造函数和$ onInit之间的区别在于，仅当构造Element（可以通过$ element操纵DOM元素）并且初始化所有绑定（组件的输入）时，才会触发$ onInit。