使用“ require”时，父组件不会传递给子组件

Question

我试图将父组件的控制器的功能调用到子组件的控制器中。但是，父组件似乎没有在Init上注入到我的子组件的控制器中。

在下面的代码段中，我试图在子组件的控制器中调用父组件（即show）的控制器（即nvPanel）的PanelController方法：< / p>

module AppExample {
    import ITimeoutService = angular.ITimeoutService;
    import ILogService = angular.ILogService;

    class LegendController implements angular.IComponentController {

        private $timeout: ITimeoutService;
        private $log: ILogService;
        // Parent component reference
        panelComponent: PanelComponent;

        static $inject = [
            "$timeout",
            "$log",
        ];

        constructor(
            $timeout: ITimeoutService,
            $log: ILogService
        ) {
            this.$timeout = $timeout;
            this.$log = $log;
        }

        $onInit(): void {
            let controller = this.panelComponent.controller;
            controller.show();
        }
    }

    class LegendComponent implements angular.IComponentOptions {
        templateUrl = "/.../nv-legend.html";
        controller = LegendController;
        require: {
            panelComponent: "^nvPanel"
        };
    }

    angular.module("AppExample").component("nvLegend", new LegendComponent());
}

但是，尽管panelComponent在onInit函数中未定义（即未由AngularJS注入），尽管在组件的选项中将其标记为“必需”。

这是父级和子级组件的使用方式：

<div>
    <nv-panel id="legendPanel">
        ...
        <div id="legend-container" class="slide-out-div">
            <nv-legend></nv-legend>
        </div>
        ...
    </nv-panel>
</div>

这是nv-panel.ts

module AppExample { 
    export class PanelController {

        constructor(...) {
            ...
        }

        show(): void {
            ...
        }     
    }

    export class PanelComponent implements angular.IComponentOptions {
        controller = PanelController;
        templateUrl = "/client/features/shared/panel/nv-panel.html";
        transclude = true;
    }

    angular.module("AppExample").component("nvPanel", new PanelComponent());