изменить вид компонента на основе разницы URL - PullRequest
Новая
       28

изменить вид компонента на основе разницы URL

0 голосов
/ 25 декабря 2018

По сути, я хотел бы иметь только один вид для отображения сообщений блога в моем угловом приложении.Таким образом, чтобы получить список сообщений в блоге для всех, последних и категорий, я буду использовать только один компонент.

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

вышеупомянутые два URL (первый и второй) будут отображать разные списки, но для одного и того же компонента.

И мой маршрутизатор выглядит так: 

const routes: Routes = [
  {path: 'blog', component: BlogpostListComponent},
  {path: 'blog/post/:id', component: BlogpostDetailComponent},
  {path: 'blog/category/:name', component: BlogpostListComponent},
];

ИтакКак я могу внести изменения в BlogpostListComponent, так как на данный момент все, недавние и по категориям показывают одно и то же содержание, так как я не знаю, как можно дифференцировать на основе URL.если я смогу понять, как понять разницу в шаблоне URL, тогда я смогу использовать *ngIf и показывать разное содержимое на разных URL в одном и том же компоненте.

1 Ответ

0 голосов
/ 25 декабря 2018

Вставьте 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>
...