Angular 在不更改组件的情况下导航内容

Question

我有 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.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个组件同时显示它们？

Answer 1

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

Answer 2

上述解决方案肯定有效，但理想情况下，您应该使用 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
];

您将运行遇到的最终问题是管理状态。有很多方法可以处理这个问题。如果你想支持深度 linking，那么我建议这样做：

const routes: Routes = [
  { path: 'view-topic/:topicId', component: ViewTopicComponent },
  { path: 'sub-topic/:subTopicId', component: SubTopicComponent },
  { path: '**', component: PageNotFoundComponent },  // Wildcard route for a 404 page
];

这就是您 link 主题的方式：

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

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

Angular 在不更改组件的情况下导航内容

Angular navigate content without change component

javascript

router

angular