ngUpgrade - 从ng2到ng1的路由 - 如何？

Question

我正在使用ngUpgrade,我不知道如何处理ng2和ng1之间的路由.如果我在ng2组件中,如何路由到ng1控制器？反之亦然.

我正在使用ui-router作为ng1.对于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 {}