Question

基本上，我希望只有一个视图可以列出我的角度应用程序中的博客文章。因此，要获得所有博客，近期博客和类别博客的列表，我将只使用一个组件。

'XCTest/XCTest.h' file not found
Cannot find interface declaration for 'XCTestCase', superclass of 'MotwinTests'

以上两个url（第一个和第二个）将显示不同的列表，但在同一组件上。

我的路由器看起来像这样：

    http://localhost:4200/blog/category/technology
    http://localhost:4200/blog/recent
    http://localhost:4200/blog/post/1

所以我该如何对const routes: Routes = [ {path: 'blog', component: BlogpostListComponent}, {path: 'blog/post/:id', component: BlogpostDetailComponent}, {path: 'blog/category/:name', component: BlogpostListComponent}, ];进行更改，因为到目前为止，由于我不知道如何根据url进行区分，因此最近的所有内容和基于类别的内容都显示相同的内容。如果我能弄清楚如何理解URL模式的差异，那么我可以利用BlogpostListComponent并在同一组件的不同URL上显示不同的内容。

Answer 1

在组件中插入Router，然后使用它来获取当前URL：

import { Router } from '@angular/router';

currentRoute: string;
category: boolean;

constructor(
  private router: Router
) { }

ngOnInit() {
    this.currentRoute = this.router.url;

    if (this.currentRoute.includes('category') {
        this.category = true;
    } else {
        this.category = false;
    }
}

然后在您的模板中：

<div *ngIf="category">
    This is category mode.
</div>

<div *ngIf="!category">
    This is regular mode.
</div>

根据网址差异修改组件视图

1 个答案: