第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

Angular 導(dǎo)航內(nèi)容而不更改組件

Angular 導(dǎo)航內(nèi)容而不更改組件

我有 2 個(gè)組件：componentA 和 componentB 當(dāng)我單擊 componentA 中的按鈕時(shí)，這將導(dǎo)航到 componentB，但是 componentA 和 componentB 具有相同的過(guò)濾器和左側(cè)邊欄，唯一不同的是內(nèi)容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>有沒(méi)有辦法使用 1 個(gè)組件來(lái)顯示它們？
查看完整描述

2 回答

?
慕標(biāo)5832272

TA貢獻(xiàn)1966條經(jīng)驗(yàn) 獲得超4個(gè)贊

上述解決方案肯定會(huì)起作用，但理想情況下，您應(yīng)該使用 Angular 路由器。這就是我認(rèn)為你在這里想要實(shí)現(xiàn)的目標(biāo)。


以下是您需要實(shí)施的更改：


someRootComponent.html

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

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

    <router-outlet></router-outlet>

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


const routes: Routes = [

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

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

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

];

您最終會(huì)遇到的問(wèn)題是管理狀態(tài)。有很多方法可以處理這個(gè)問(wèn)題。如果您想支持深度鏈接，那么我建議您這樣做：


const routes: Routes = [

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

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

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

];

這是鏈接到主題的方式：


  <a [routerLink]="['/view-topic', topic.id]">

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


查看完整回答
反對(duì) 回復(fù) 2022-07-15
?
MMTTMM

TA貢獻(xiàn)1869條經(jīng)驗(yàn) 獲得超4個(gè)贊

您可以使用 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;

    }


查看完整回答
反對(duì) 回復(fù) 2022-07-15
  • 2 回答
  • 0 關(guān)注
  • 101 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)