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 {}

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

1 个答案: