ngUpgrade-從ng2到ng1的路由-怎么樣？

Question

我正在使用ngUpgrade，但我不知道如何處理ng2和ng1之間的路由。 如果我在ng2組件中，該如何路由到ng1控制器？ 反之亦然。

我正在為ng1使用ui-router。 對於ng2，我正在使用角度小組的路由器。

謝謝大家！

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路由器出口。

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