如何使用 workin routerlink 將組件正確添加到我的 Jhipster + Angular 項目中？

Question

所以我在 jhipster 上生成了一個新的應用程序，我想為我的門戶網站創建一個前端常見問題頁面，我將它創建為一個實體，它生成了所有的 CRUD 組件（詳細信息、刪除、編輯）。 這當然在 jhipster 模板中看起來像一個管理員/用戶視圖表，帶有用於查看、編輯或刪除的按鈕。 我想在不需要擁有帳戶的情況下向網站訪問者公開常見問題解答...所以我生成了一個組件“常見問題頁面”，如文檔所述： https : //www.jhipster.tech/using-angular/唯一的問題是 routerlink 不會將我重定向到“/faq”，而是將我重定向到 404 頁面。 我根據現有的“主頁”創建了“常見問題頁面”組件，如下所示：

• faq-page.component.html（現在只有一些文本）

• 常見問題頁面.component.ts

   import { Component, OnInit } from '@angular/core'; @Component({ selector: 'jhi-faq-page', templateUrl: './faq-page.component.html', styleUrls: ['./faq-page.component.scss'] }) export class FaqPageComponent implements OnInit { constructor() { } ngOnInit() { } }

• 常見問題頁面.module.ts

 import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { TestAppSharedModule } from 'app/shared/shared.module'; import { FAQ_PAGE_ROUTE } from './faq-page.route'; import { FaqPageComponent } from './faq-page.component' @NgModule({ imports: [RouterModule.forChild([FAQ_PAGE_ROUTE]), TestAppSharedModule ], declarations: [FaqPageComponent] }) export class FaqModule { }

• 常見問題頁面.route.ts

 import { Route } from '@angular/router'; import { FaqPageComponent } from './faq-page.component'; export const FAQ_PAGE_ROUTE: Route = { path: 'faq', component: FaqPageComponent, data: { authorities: [], pageTitle: 'faq-page.title' } };

Answer 1

檢查您的 app-routing.module.ts 並確保...LAYOUT_ROUTES,行最后！ ng generate將在最后添加您的新組件，這將使全能 404 頁面（包含在 LAYOUT_ROUTES 中）在您的新頁面之前匹配。 這需要用大型友好字母打印在某處。