Angularjs到angular4到angularjs

Bob*_*bby 8 javascript angularjs angular

我有一个APP,我逐渐移植到角4.

现在,我在AngularJS中的Angular 4中有一些组件.从angularjs - > angular4 - > angularjs传递时我遇到了问题.从JS到4的第一次转换非常完美,但是后来我在主屏幕上遇到了我的Angular 4组件.URL更改,但页面没有重定向到Angular JS组件,我的ng-outlet不再刷新.

ROUTER是angularJS.

Angular 4组件使用以下方式降级:

import {
    Injectable,
    ModuleWithProviders,
    NgModule
} from '@angular/core';

import {
    APP_MODULE_NAME
} from '../../constants';

declare const angular: angular.IAngularStatic;
import {
    downgradeInjectable,
    downgradeComponent
} from '@angular/upgrade/static';


// Singleton Module
@NgModule()
@Injectable()
export class ComponentHelper {
    constructor() {}

    static forRoot(): ModuleWithProviders {
        return {
            ngModule: ComponentHelper
        }
    }

    public static DowngradeFactory(componentName: string, className: any): void {
        angular.module(APP_MODULE_NAME).factory(componentName, downgradeInjectable(className));
    }

    public static DowngradeDirective(componentName: string, className: any): void {
        angular.module(APP_MODULE_NAME).directive(componentName, downgradeComponent({
            component: className
        }))
    }
}
Run Code Online (Sandbox Code Playgroud)

我在路由器中这样做

{
    path: '/pj/:project_id/ds/:datastore_id/list/ng4/all',
    component: 'downgradeNG4',
    name: 'DowngradeNG4'
}, {
    path: '/pj/:project_id/ds/:datastore_id/search/:search_id/list/all',
    name: 'NormalJS',
    component: 'normalJS'
},
Run Code Online (Sandbox Code Playgroud)

在AngularJS的某些时候,我这样做,所以我重定向到NG4组件.

const path = `pj/${self.projectID}/ds/${self.currentDatastoreID}/list/ng4/all`;
$location.path(path);
Run Code Online (Sandbox Code Playgroud)

现在,在angular 4组件中,如果我点击角度JS中的UI菜单,如果浏览器中的路径更改发生更改,则不会重定向事件.

并非所有组件/模块都降级,我应该降级每个服务和子组件吗?或者只是(像现在一样)直接从AngularJS路由器调用的组件?

我应该降级他们吗?

mol*_*ikh 1

我之前已经经历过这个过程(从 angluarjs 迁移到 Angular )。我强烈建议你再次用 Angular 6 重写所有组件(从 Angular 4 到 6 也有一些基本的变化)它会比这种方法花费更少的时间。您可以保持 html 和 css 的更改最少。

无论如何,如果你仍然坚持你的方式。只需将其分成可以单独工作的单独部分即可。* 可以在一个页面中同时运行 AngularJS 和 Angular

如果您需要将数据从 AngularJS 传递到 Angular,我会用另一种方式来完成,例如使用本地存储。

无论如何,通过你的解释很难理解问题出在哪里,即使控制台中有错误,角度调试也需要时间。