7

rc.3 と非推奨のルーターで動作する Angular 1/Angular 2 ハイブリッド アプリがあります。私が見つけたすべての情報源から、rc.5 は新しいルーターに向けた大きな一歩です。ハイブリッド アプリをブートストラップしてルート コンポーネントをレンダリングすることはできますが、ルーティングが機能しません。

var upgradeAdapter = new UpgradeAdapter(forwardRef(() => AppModule));

angular.module('ng1App', [])
  .directive('myBaseComponent', <any>upgradeAdapter.downgradeNg2Component(MyBaseComponent));

@NgModule({
  imports: [BrowserModule, routing],
  providers: [appRoutingProviders, HTTP_PROVIDERS],
  declarations: [MyBaseComponent,
    MyNG2RoutableComponent]
})
class AppModule { }


upgradeAdapter.bootstrap(document.body, ['ng1App']).ready(function(){
  console.log('bootstraped!');
});

私のルート NG2 コンポーネントは、それがレンダリングするテンプレートに何かを投げることができるので、ブートストラップします。しかし、追加する<router-outlet></router-outlet>と子ルートがレンダリングされないようです。upgradeAdapter を使用せずに NG2 アプリだけをブートストラップすると、すべてが期待どおりに機能します。

接続部分が 1 つだけ欠けているように感じます。何か案は？

Angular RC.6 および Router RC.2 の更新

先週、ルーターの rc.6 と rc.2 バージョンにアップグレードしましたが、同じ問題がありました。ルーティングが関係していない場合、UpgradAdapter はうまく機能します。ルーターアウトレットを引き込むと、何もレンダリングされず、エラーも発生しません。

4

1 に答える 1

4

Angular Router をインスタンス化するには、少なくとも 1 つのコンポーネントをブートストラップする必要があります。ngUpgrade は Angular 1 側をブートストラップするため、Angular 2 ブートストラップ コンポーネントはありません。これを回避するには、 をオーバーライドしApplicationRefて独自のコンポーネントを提供する必要があります。これは、これを達成する方法を示す実用的なプランカーです。

http://plnkr.co/edit/Gj8xq0?p=preview

参考のため：

https://github.com/angular/angular/issues/9870

于 2016-09-13T13:30:42.040 に答える