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' 
      }); 
    }); 

と角2 Module中：

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

あなたはNg1Ng2UrlHandlingStrategyというクラスを作成し、そこにそれらの間のあなたのルートをdevideことができます。

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