我想在 Angular 中添加一個 html 頁面作為選項卡的內容。我嘗試使用 mat-tab-nav-bar 和 mat-tab-link 來執行此操作，但它會將我發送到新頁面，而不是將內容顯示為當前選項卡的正文。
當前代碼：
<p>This is a page to test your Java skills</p>
<nav mat-tab-nav-bar backgroundColor="primary" color="primary">
<a mat-tab-link
routerLinkActive="active"
[routerLink]="['/questions']"> Questions
</a>
</nav>
<div><router-outlet></router-outlet></div>
我應該怎么做才能將 html 頁面顯示為當前選項卡的內容？
uj5u.com熱心網友回復：
這是路由配置
import {RouterModule, Routes} from "@angular/router";
import {HomeComponent} from "./home/home.component";
import {QuestionlistComponent} from "./questions/question-overview/questionlist.component";
import {QuestionDetailComponent} from "./questions/question-detail/question-detail.component";
import {NewQuestionFormComponent} from "./questions/new-question-form/new-question-form.component";
const routes: Routes = [
{path: '', component: HomeComponent},
{path: 'questions', component: QuestionlistComponent},
{path: 'questions/:id', component: QuestionDetailComponent},
{path: 'post-question', component: NewQuestionFormComponent}
]
@NgModule({
declarations: [],
imports: [
RouterModule.forRoot(routes)
],
exports: [
RouterModule
]
})
export class AppRoutingModule { }```
uj5u.com熱心網友回復：
如果具有 mat-tab 的組件是 Home.component 你應該有：
const routes: Routes = [
{path: '', component: HomeComponent,children:[
{path: 'questions', component: QuestionlistComponent},
{path: 'questions/:id', component: QuestionDetailComponent},
{path: 'post-question', component: NewQuestionFormComponent}
]}
]
注意：您可以將 mat-tab 放在主組件中并使用您的路線
uj5u.com熱心網友回復：
@湯米華倫天奴
<p>This is a page to test your Java skills</p>
<nav mat-tab-nav-bar backgroundColor="primary" color="primary">
<a mat-tab-link
routerLinkActive="active"
[routerLink]="'post-questions'"> Post Questions
</a>
<a mat-tab-link
routerLinkActive="active"
[routerLink]="'questions'"> Questions
</a>
</nav>
<div>
<router-outlet></router-outlet>
</div>嘗試將 routerLink 從： [routerLink]="'/questions'" 更改為 routerLink="questions"
還要確保您的 to 組件是正確的。常量路由：Route[] = [ { path: 'questions', component: QuestionsComponent }];
這是一篇文章： https ://nirajsonawane.github.io/2018/10/27/Angular-Material-Tabs-with-Router/
這是實施示例： https ://github.com/nirajsonawane/angular-material-tab-router
堆疊閃電戰。 https://stackblitz.com/edit/angular-mat-tab-nav-aw488p?file=main.ts,app/tab-nav-bar-basic-example.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/510199.html
標籤：html有角度的打字稿
下一篇：呼叫API時查詢引數編碼