带条件的角度路径组件

Question

我在“feed”模块的应用程序中有一个路由。在提要中，我有两种类型的帖子，我需要打开此帖子并通过直接链接显示完整信息，我如何根据条件打开正确的组件，或者我如何解决这个问题？

const feed_routes: Routes = [
    { path: '', component: ParentComponent,
        children: [
            { path: ':slug', component: FirstComponent },
            { path: ':slug', component: SecondComponent },
        ]
    }
];

Answer 1

使用通用组件来呈现所有帖子。在它的模板中分别渲染两种类型的帖子，如下所示。

在组件.ts中

@Component({
  selector: 'app-post-container',
  styleUrls: ['./app-post-container.component.scss'],
  templateUrl: './app-posts-container.component.html'
})
export class PostsContainerComponent {
  @input()
  public type;
}

在组件.html中

<div>
  <first-component *ngIf="type === 'conditionOne'"></first-component>
  <second-component *ngIf="type === 'conditionTwo'"></second-component>
</div>