70

現在取り組んでいるアプリケーションを最新の Angular 2 リリース候補にアップグレードしています。この作業の一環として、NgModule 仕様を使用して、アプリケーションのすべての部分をモジュールに移行しようとしています。ほとんどの場合、ルーティングの問題を除いて、これは非常にうまくいきました。

"@angular/common": "2.0.0-rc.5",
"@angular/compiler": "2.0.0-rc.5",
"@angular/core": "2.0.0-rc.5",
"@angular/forms": "0.3.0",
"@angular/http": "2.0.0-rc.5",
"@angular/platform-browser": "2.0.0-rc.5",
"@angular/platform-browser-dynamic": "2.0.0-rc.5",
"@angular/router": "3.0.0-rc.1",

私のアプリはモジュールの構成として構築されており、いくつかのモジュールが親モジュールの子として一緒に接着されています。たとえば、通知モジュール、ユーザー モジュール、および電話モジュール (たとえば) で構成される管理モジュールがあります。これらのモジュールへのルートは次のようになります...

/admin/notifications/my-notifications
/admin/users/new-user
/admin/telephony/whatever

ルーターの以前のリリースでは、これは「子」を使用して簡単に実現できました。

export const AdminRoutes: RouterConfig = [
   {
      path: "Admin",
      component: AdminComponent,
      Children: [
         ...UserRoutes,
         ...TelephonyRoutes,
         ...NotificationRoutes
      ]
   }
]

別のファイルでは、サブモジュールの一部として、個々のモジュール ルートも定義します。

export const UserRoutes: RouterConfig = [
    {
       path: "users",
       component: userComponent,
       children: [
           {path: "new-user", component: newUserComponent}
       ]
    }

]

これはすべて非常にうまく機能しました。モジュールへのアップグレードの過程で、代わりにすべてを独自の個別のルーティング ファイルに移動したため、これら 2 つのファイルは次のようになりました。

const AdminRoutes: Routes = [
    {path: "admin", component: AdminComponent}
] 

export const adminRouting = RouterModule.forChild(AdminRoutes)

と

const UserRoutes: Routes = [
       path: "users",
       component: userComponent,
       children: [
           {path: "new-user", component: newUserComponent}
       ]
] 

export const userRouting = RouterModule.forChild(UserRoutes)

これらすべてが整ったら、userRouting をインポートする UsersModule と、adminRoutes と UsersModule をインポートする AdminModule があります。私の考えでは、UsersModule は AdminModule の子であるため、ルーティングは以前と同じように機能します。残念ながら、そうではないので、ただのユーザールートになってしまいます

/users/new-user

それ以外の

/admin/users/new-user

さらに、このため、新しいユーザー コンポーネントは管理コンポーネントのルーター アウトレットに読み込まれず、アプリケーションのスタイリングとナビゲーションが失われます。

私の人生では、UserModule のルートを AdminModule の子として参照する方法を考え出すことはできません。これを古い方法で実行しようとしましたが、ルートが 2 つのモジュールにあるというエラーが発生しました。これは明らかに新しくリリースされたものであるため、これらのケースの一部に関するドキュメントは少し限られています。

誰でも提供できるヘルプをいただければ幸いです。

4

7 に答える 7

57

さて、週末の大部分でこれをいじった後、私はそれを自分の側で実行しました。最終的に私にとってうまくいったのは、次のことをすることでした：

  • Routesルーティングするすべてのモジュールをすべてエクスポートします。RouterModule.forChild()子モジュールのいずれもインポートしないでください。
  • childs モジュール定義の childs ルート定義から見えるすべてのコンポーネントをエクスポートします。
  • importすべての子ルートを通常どおりインポート (Typescript キーワードを意味する) し、...演算子を使用してこれらを正しいパスの下に組み込みます。パスを定義する子モジュールで動作させることはできませんでしたが、親でそれを使用すると正常に動作します (遅延読み込みと互換性があります)。

私の場合、次のような階層に 3 つのレベルがありました。

  • ルート ( /)
    • 編集者 ( editor/:projectId)
      • クエリ ( query/:queryId)
      • ページ ( page/:pageId)
    • フロント ( about)

次の定義は、/editor/:projectId/query/:queryIdパスに対して機能します。

// app.routes.ts
import {editorRoutes}                   from './editor/editor.routes'

// Relevant excerpt how to load those routes, notice that the "editor/:projectId"
// part is defined on the parent
{
    path: '',
    children: [
        {
            path: 'editor/:projectId',
            children: [...editorRoutes]
            //loadChildren: '/app/editor/editor.module'
        },
    ]
}

エディターのルートは次のようになります。

// app/editor/editor.routes.ts
import {queryEditorRoutes}              from './query/query-editor.routes'
import {pageEditorRoutes}               from './page/page-editor.routes'

{
    path: "", // Path is defined in parent
    component : EditorComponent,
    children : [
        {
            path: 'query',
            children: [...queryEditorRoutes]
            //loadChildren: '/app/editor/query/query-editor.module'
        },
        {
            path: 'page',
            children: [...pageEditorRoutes]
            //loadChildren: '/app/editor/page/page-editor.module'
        }
    ]
}

QueryEditor の最後の部分は次のようになります。

// app/editor/query/query-editor.routes.ts
{
    path: "",
    component : QueryEditorHostComponent,
    children : [
        { path: 'create', component : QueryCreateComponent },
        { path: ':queryId', component : QueryEditorComponent }
    ]
}

ただし、これを機能させるには、一般的Editorに をインポートおよびエクスポートするQueryEditor必要QueryEditorがQueryCreateComponentあり、エクスポートする必要がQueryEditorComponentあります。これらはインポートで表示されるためです。これを行わないと、の行に沿ってエラーが発生しますComponent XYZ is defined in multiple modules。

遅延読み込みもこの設定でうまく機能することに注意してください。その場合、子ルートはもちろんインポートされるべきではありません。

于 2016-08-15T09:53:04.177 に答える
35

私も同じ問題を抱えていました。

ここでの答えは、 loadChildren を使用してかなり良いです:

          {
             path: 'mypath',
             loadChildren : () => myModule
          }

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

于 2016-10-22T22:10:47.793 に答える
1

これも解決する方法を見つけました。基本的に、以前と同じ方法でルートを定義していますが、今回は最上位の子レベルで定義しています。たとえば、私の管理ルート:

const AdminRoutes: Routes = [
   {
      path: 'admin',
      component: AdminComponent,
      children: [
          ...setupRoutes
      ]
   }
]

export const adminRouting = RouterModule.forChild(AdminRoutes)

セットアップ ルート ファイルは、サブエリアからインポートされます。このサブエリアは、より多くの子を含む独自のルートを定義します。問題は、このファイルが RouterModule.forChild の結果ではなく、「Routes」オブジェクトをエクスポートすることです。

それがセットアップされた後、サブモジュール定義から子ルートとサブ子ルートを削除しました。次に、上記のマーカスのように、ルートで使用されるすべてのコンポーネントを各サブモジュールからエクスポートする必要がありました。これを行うと、ルートは希望どおりに機能し始めました。

私の親モジュールは子モジュールのルートについてあまりにも多くのことを知っているので、私はこのソリューションが本当に好きではないと思います。しかし、少なくとも RC5 でそれを回避する簡単な方法であり、すべてのコンポーネントがいたるところにリークすることはありません。彼は私を正しい軌道に乗せたので、私は先に進み、マーカスの答えを答えとしてマークします.

于 2016-08-18T22:05:24.663 に答える
0

を使用しloadChildrenます。それで大丈夫です。ただし、ビルド プロセスを再開すると、ビルド エラーが発生します。エクスポートされたシンボルをloadChildren.

import { ChildModule } from './child/child.module';

export function childRouteFactory() {
  return ChildModule;
}

...
  {
    path: 'child',
    loadChildren: childRouteFactory
  }
...
于 2017-04-14T00:52:47.833 に答える