angularjs - ngUpgrade - 从 ng2 路由到 ng1 - 怎么样？

Question

我正在使用 ngUpgrade，但我不知道如何处理 ng2 和 ng1 之间的路由。如果我在 ng2 组件中，我该如何路由到 ng1 Controller ？反之亦然。

我正在为 ng1 使用 ui-router。对于 ng2，我在 Angular 团队中使用路由器。

谢谢大家!

Answer 1

首先，您需要在 Angular 1.x 和 2.x 应用程序中正常定义路由。

app.config(function($routeProvider) {
        $routeProvider

            // route for the home page
            .when('/', {
                templateUrl : 'pages/home.html',
                controller  : 'mainController'
            })

            // route for the about page
            .when('/about', {
                templateUrl : 'pages/about.html',
                controller  : 'aboutController'
            })

            // route for the contact page
            .when('/contact', {
                templateUrl : 'pages/contact.html',
                controller  : 'contactController'
            });
    });

在 Angular 2 Module 中:

Module.config(($routeProvider) => {
  $routeProvider
    .when('/user/:id',     {template : '<user-details></userdetails>'})
    .when('/users', {template : '<user-list></userlist>'});
});

您可以创建一个名为 Ng1Ng2UrlHandlingStrategy 的类，并在其中划分它们之间的路由:

class Ng1Ng2UrlHandlingStrategy implements UrlHandlingStrategy {
  shouldProcessUrl(url) { return url.toString().startsWith("/home") || url.toString().startsWith("/aboute") || url.toString().startsWith("/contact"); }
  extract(url) { return url; }
  merge(url, whole) { return url; }
}

在你的主要组件中:

providers: [
    // Providing a custom url handling strategy to tell the Angular 2 router
    // which routes it is responsible for.
    { provide: UrlHandlingStrategy, useClass: Ng1Ng2UrlHandlingStrategy }
]

最后，更新 root 组件以包含 Angular 2 路由器 socket 。

@Component({
  selector: 'root-cmp',
  template: `
    <router-outlet></router-outlet>
    <div class="ng-view"></div>
  `,
})
export class RootCmp {}