Question

情景：

我有一个最初用Ng编写的Ng网站。新页面是用Ng2创建的。 Ng1对话框由Ng1和Ng2页面创建和使用。混合页面在使用Ng 2.1降级Ng 2组件并依赖Ng JIT时起作用。

但是，当我使用Ng 2.2.0到2.2.4并执行AoT时，与路由关联的Ng 1控制器不会执行。该路由执行jobEditorFactory.getJobEditorCriteria方法，promise成功解析，并检索模板。但是Ng 1 jobEditorCtrl控制器中没有任何内容被执行，所以没有任何东西可以呈现它的ng-view。好像控制器没有注册。 angular-cli没有错误，浏览器中没有运行时错误。纯Ng1页面和纯Ng2页面继续工作。使用AoT引导降级的Ng2控制器似乎没有错误地工作并且记录了引导Ng 1-Ng 2 hybrid＆＃39;到控制台。在这种情况下，我是否缺少控制器的一些命名约定？

没有AoT的jobEditorBootstrap.ts：

import { Component, forwardRef } from '@angular/core';
import { UpgradeAdapter } from '@angular/upgrade';

import { JobActionsComponent } from '../../JobEditor/Components/jobActions.component';
import { JobEditorUpgradeModule } from './jobEditorUpgrade.module';

declare var angular: any; // eventually try typings for angular 1

/**
 * the component selector and directive name should not have -.  The element on the page will have a - though.
 */
var upgradeAdapter = new UpgradeAdapter(forwardRef(() => JobEditorUpgradeModule));

angular.module('jobEditorApp')
    .directive('jobActions', upgradeAdapter.downgradeNg2Component(JobActionsComponent))

upgradeAdapter.bootstrap(document.body, ['jobEditorApp'])

Ng 1 app：

var jobEditorApp = angular.module('jobEditorApp', ['ui.sortable', 'ui.bootstrap', 'ngAnimate', 'ngRoute', 'ngResource',
'LocalStorageModule', 'arraySplitContainsFilter', 'jobEditorFactory', 'jobEditorModal', 'jobStatusWorkflowFilter', 
'fundingHistoryModal', 'paddedNumberFilter', 'modalAreYouSure', 'addlFundsModal', 
'debugDetails', 'ui.grid', 'ui.grid.edit', 'ui.grid.rowEdit', 'ui.grid.cellNav', 'ui.grid.resizeColumns', 
'angular.filter', 'httpInterceptor', 'angulartics', 'angulartics.piwik', "notificationService.factory", "reportService.factory"
]);

jobEditorApp.config(['$routeProvider', 'localStorageServiceProvider', '$analyticsProvider',
function ($routeProvider, localStorageServiceProvider, $analyticsProvider) {
  //$locationProvider.html5Mode(true);
  $analyticsProvider.firstPageview(false); /* Records pages that don't use $state or $route */
  $analyticsProvider.settings.pageTracking.trackRelativePath = false; // logs querystring
  $routeProvider.
    when('/', {
        templateUrl: '/ng-app/JobEditor/Templates/jobEditorViewTemplate.html',
        caseInsensitiveMatch: true,
        controller: 'jobEditorCtrl',
        controllerAs: 'jobEditorCtrl',
        resolve: {
            jobEditorViewModel: ['jobEditorFactory', '$route', function (jobEditorFactory, $route) {
                return jobEditorFactory.getJobEditorCriteria(0, 0, $route.current.params.sysid, false).get().$promise;
                //.then(
                //    function () {
                //        console.log('getJobEditorCriteria resolved successfully');
                //    },
                //    function () {
                //        console.log('getJobEditorCriteria failed');
                //    },
                //    function () {
                //        console.log('getJobEditorCriteria status');
                //    });  // query for array of objects (i.e. List<>) or get for object
            }]
        }
    });

  localStorageServiceProvider
      .setPrefix('silgancapitaljobs_criteriaShared')
      .setStorageType('localStorage');

}]);

jobEditorCtrl.js：

jobEditorApp.controller('jobEditorCtrl',
['$scope', '$http', '$uibModal', '$filter', '$route', "$window", '$timeout', 'jobEditorViewModel',
'jobEditorFactory', 'capitalJobsSharedFactory', 'localStorageService', 'uiGridConstants', '$q',
'ReportService', 'NotificationService',
function jobEditorCtrl($scope, $http, $uibModal, $filter, $route, $window, $timeout, jobEditorViewModel,
jobEditorFactory, capitalJobsSharedFactory, localStorageService, uiGridConstants, $q,
ReportService, NotificationService
) {
/* code removed here for brevity */

}]);

jobEditorBootstrap-aot.ts：

import { enableProdMode, PlatformRef, NgModuleFactory, Component, forwardRef } from '@angular/core'
import { platformBrowser } from '@angular/platform-browser';
import { UpgradeModule, downgradeComponent } from '@angular/upgrade/static';

import { JobActionsComponent } from '../../JobEditor/Components/jobActions.component';
import { JobEditorUpgradeModuleNgFactory } from '../../../tmp/aot/ng2-App/Bootstrapper/jobEditorUpgrade/jobEditorUpgrade.module.ngfactory';

declare var angular: any;

angular.module('jobEditorApp')
.directive(
    'jobActions',
    downgradeComponent(
        // The inputs and outputs here must match the relevant names of the properties on the "downgraded" component.
        {
            component: JobActionsComponent
        }
    )
);

enableProdMode();

// bootstrap function "borrowed" from the angular test cases
export function bootstrap(
platform: PlatformRef, Ng2Module: NgModuleFactory<{}>, element: Element, ng1ModuleName: string) {
// We bootstrap the Angular 2 module first; then when it is ready (async)
// We bootstrap the Angular 1 module on the bootstrap element
return platform.bootstrapModuleFactory(Ng2Module).then(ref => {
    let upgrade = ref.injector.get(UpgradeModule) as UpgradeModule;
    upgrade.bootstrap(element, [ng1ModuleName]);

    console.log('bootstrapping Ng 1 - Ng 2 hybrid');
    return upgrade;
});
}

bootstrap(
    platformBrowser(),
    JobEditorUpgradeModuleNgFactory,
    document.body,
    'jobEditorApp')
    .catch(err => console.log(err)
);

Angular 2 - AOT - 降级Ng2控制器 - Ng 1应用程序不执行Ng 1控制器

0 个答案: