web-dev-qa-db-ja.com

Angular 2スローエラー：コンセントがアクティブになっていません

アプリを設定して、Recipe BookにRecipiesのリストが表示されるようにしました。レシピをクリックすると、ネストされたルートにRecipe Detailsが表示されます。これには、クリックするとRecipes Details内のネストされたルートに材料をロードするボタンもあります。

これまでのところ、別のRecipeに移動しようとした場合を除いて、ルーティングは機能しているようです。 Ingredients tray（route）がアクティブな場合、レシピが変更され、Ingredientsルートが折りたたまれます。次に、（成分を開かずに）ナビゲートしようとすると、次のエラーが発生します。

Uncaught (in promise): Error: Outlet is not activated
Error: Outlet is not activated

ルーターがIngredientsをアクティブにする必要があるか、ネストされたルートを理解していないようです。それは私の考えですが、それを修正する方法や間違ったときはわかりません。

single-recipe-book-page.component.html

<app-tray class="recipe-list">
    <app-recipe-list [recipe]="recipe"></app-recipe-list>
</app-tray>
<router-outlet></router-outlet>

recipe-detail.component.html

<app-tray class="recipe">
    The routing has worked and loaded recipe.
</app-tray>
<router-outlet></router-outlet>

ingredients-list.component.html

<app-tray class="ingredients-list">
    Recipe Ingredients have loaded.
</app-tray>

app.routes.ts（更新）

export const routerConfig : Route[] = [
  {
    path: 'recipe-books',
    children: [
      {
        path: ':id', component: SingleRecipeBookPageComponent,
        children: [
          {
            path: 'recipes',
            children: [
              { path: ':id', component: RecipeDetailComponent,
                children: [
                  { path: '', component: IngredientsListComponent },
                  { path: 'ingredients', component: IngredientsListComponent }
                ]
              },
              { path: 'new', component: IngredientsListComponent },
              { path: '', component: RecipeDetailComponent }
            ]
          },
          { path: '', redirectTo: 'recipes', pathMatch: 'full' }
        ]
      },
      { path: '', component: RecipeBooksPageComponent }
    ]
  },
  { path: 'ingredients', component: IngredientsComponent },
  { path: '', redirectTo: 'recipe-books', pathMatch: 'full' },
  { path: '**', redirectTo: 'recipe-books', pathMatch: 'full' }
];
angularangular2-router3
13
Daimz

このルートは無効であり、エラーが発生するはずです。

{ path: '' },

ルートには、component、redirectTo、またはchildrenが必要です。

空のパスルートに子がない場合は、pathMatch: 'full'。

あなたが欲しいのは

{ path: '', component: DummyComponent, pathMatch: 'full' },

ここで、DummyComponentは空のビューを持つコンポーネントです。これらすべてのパスに同じDummyComponentを再利用できます。

15
Günter Zöchbauer

TLDR;答え：

_{
      path: ':question',
      runGuardsAndResolvers: () => false   // blocks component creation
}
_

この問題に関連すると思われる 新機能 がAngularルーターにありますが、私が知る限り、直接的な解決策ではありません。新しいオプションは_runGuardsAndResolvers = 'pathParamsChange'_であり、Angularがガードとリゾルバーをチェックするタイミングに影響します-そして、このアウトレットチェックを実行するかどうかが決定的に重要です。

新しいオプションを見つける前に：

  • 私はangularコードにステップスルーしていたところ、実際のエラーは_context.outlet.component_（ここでcomponentはスローするゲッター）でここで発生します（赤で強調表示）。

enter image description here

  • 修正するには、どういうわけか_shouldRun == false_にする必要があります。

  • そしてshouldRunは単にshouldRunGuardsAndResolvers(...)なので、falseを返すようにできる場合、「間違った」場所にコンポーネントを作成しようとしません。

したがって、解決策は非常に簡単です。

_ {
        path: 'contactus',
        component: ContactUsComponent,

        children: [
            {
                path: 'topics',
                pathMatch: 'full'
            },

            {
                path: 'faq',
                component: FaqPanelComponent
            },

            { 
                path: 'test',
                component: ContactusTopicListComponent
            },
            {
                path: ':category',

                children: 
                [
                    {
                        path: ':question',
                        runGuardsAndResolvers: () => false   // blocks component creation
                    }
                ]
            }
        ]
    },
_

現在runGuardsAndResolversにはかなりの いくつかのオプション がありますが、私が使用しているものは常にfalseを返します。これはneverと同等であり、本当にオプションにします。しかし、それは私が新しいルーター機能について知った方法です:-)

また、2つのレベルがある場合、これを両方（またはおそらく最高レベル）のレベルに設定する必要があります。

_        {
            path: ':category',
            runGuardsAndResolvers: () => false,

            children: 
            [
                {
                    path: ':question',
                    runGuardsAndResolvers: () => false
                }
            ]
        }
_

リゾルバーについてさらに読む： https://blog.angularindepth.com/new-in-angular-v7-1-updates-to-the-router-fd67d526ad05

1
Simon_Weaver

これは他の誰かを助けるかもしれません。

このエラーが発生しました。ルートファイルで定義したroutesをすべて確認しましたが、pathとcomponentsは正しく定義されています。

このエラーが発生したのは、serviceからデータを取得するためにコンポーネントの1つで使用されていたapp.module.tsにRestApiの参照を追加し忘れたためです。

そのため、サービスの作成後すぐに、必ずprovidersセクションのapp.module.tsにサービス参照を追加してください。

imports: [
   BrowserModule,
   HttpModule,
   ......
 ],

providers: [
    AuthService, 
    ........ // Here, service reference
]
1
mmushtaq

本番用runGuardsAndResolvers：（>）==が機能していません。 AngularにはrunGuardsAndResolversの新機能があります。

動作するように試すことができますrunGuardsAndResolvers： "pathParamsChange"テスト済みAngular 8は正常に動作します。

0
Arzu Suleymanov