首頁猿問 Angular 導航內容而不更改組件

Angular 導航內容而不更改組件

JavaScript

尚方寶劍之說 2022-07-15 09:36:36

我有 2 個組件：componentA 和 componentB 當我單擊 componentA 中的按鈕時，這將導航到 componentB，但是 componentA 和 componentB 具有相同的過濾器和左側邊欄，唯一不同的是內容ComponentA.html <app-new-post></app-new-post> <app-filter-forum></app-filter-forum> <app-view-topic [topicData]="viewContent" (showSubTopic)="onShowSubTopic($event)"></app-view-topic>ComponentA.tsonShowSubTopic() { this.router.navigate([ComponentB])}ComponentB.html <app-new-post></app-new-post> <app-filter-forum></app-filter-forum> <app-sub-topic></app-sub-topic>有沒有辦法使用 1 個組件來顯示它們？

查看完整描述

2 回答

慕標5832272

TA貢獻1966條經驗獲得超4個贊

上述解決方案肯定會起作用，但理想情況下，您應該使用 Angular 路由器。這就是我認為你在這里想要實現的目標。

以下是您需要實施的更改：

someRootComponent.html

<app-new-post></app-new-post>

<app-filter-forum></app-filter-forum>

<router-outlet></router-outlet>

此時你可以擺脫ComponentA和componentB。您的路線如下所示：

const routes: Routes = [

{ path: 'view-topic', component: ViewTopicComponent },

{ path: 'sub-topic', component: SubTopicComponent },

{ path: '**', component: PageNotFoundComponent }, // Wildcard route for a 404 page

];

您最終會遇到的問題是管理狀態。有很多方法可以處理這個問題。如果您想支持深度鏈接，那么我建議您這樣做：

const routes: Routes = [

{ path: 'view-topic/:topicId', component: ViewTopicComponent },

{ path: 'sub-topic/:subTopicId', component: SubTopicComponent },

{ path: '**', component: PageNotFoundComponent }, // Wildcard route for a 404 page

];

這是鏈接到主題的方式：

Angular 路由器文檔非常好，可以在這里找到： Angular Router Docs

反對回復 2022-07-15

MMTTMM

TA貢獻1869條經驗獲得超4個贊

您可以使用 ngIf 檢查以顯示不同的 dom

ComponentA.html

<app-new-post></app-new-post>

<app-filter-forum></app-filter-forum>

<app-view-topic [topicData]="viewContent" *ngIf="!showBComponent"

(showSubTopic)="onShowSubTopic($event)"></app-view-topic>

<app-sub-topic *ngIf="showBComponent "></app-sub-topic>

ComponentA.ts

let showBComponent: boolean = false;

onShowSubTopic(e: any): void {

this.showBComponent = true;

}

反對回復 2022-07-15

2 回答
0 關注
95 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

Angular 導航內容而不更改組件

Angular 導航內容而不更改組件

2 回答

添加回答