Angular навигация по контенту без изменения компонента - PullRequest
Новая
       7

Angular навигация по контенту без изменения компонента

0 голосов
/ 25 апреля 2020

У меня есть 2 компонента: componentA и componentB. Когда я нажимаю кнопку в компоненте A, происходит переход к компоненту B, но компонент A и компонент B имеют одинаковый фильтр и левую боковую панель, отличается только содержимое 

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.ts
onShowSubTopic() {
   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 ]

0 голосов
/ 25 апреля 2020

Приведенное выше решение определенно будет работать, но в идеале вы должны использовать маршрутизатор 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
];

Так вы бы связались с topi c: 

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

Маршрутизатор Angular Документы отличные, они доступны здесь: Angular Документы маршрутизатора

0 голосов
/ 25 апреля 2020

Вы можете использовать ngIf, чтобы проверить, чтобы показать различные дом 

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;
    }
...