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.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 个组件来显示它们？

Answer 1

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

];

这是链接到主题的方式：

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

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

Answer 2

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

    }