ngUpgrade - маршрутизация от ng2 до ng1 - как?

Question

Я использую ngUpgrade, и я не знаю, как обрабатывать маршрутизацию между ng2 и ng1. Если я нахожусь в компоненте ng2, как мне перейти на контроллер ng1? и наоборот.

Я использую ui-router для ng1. Для ng2 я использую маршрутизатор в угловой команде.

Спасибо всем!

Answer 1

Сначала вам необходимо определить свои маршруты как обычно в приложениях с угловым 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' 
      }); 
    }); 

И Угловая 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, чтобы включить розетку с угловым 2-мя маршрутизаторами.

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