Элементы списка динамической маршрутизации

Question

У меня есть следующий код

(теги компонента ts)

    import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';

@Component({
  selector: 'app-tags',
  templateUrl: './tags.component.html',
  styleUrls: ['./tags.component.css']
})
export class TagsComponent implements OnInit{

Tags= [
'red',
'blue',
'purple'
];
  red : boolean
  blue : boolean
  purple : boolean

  constructor(private route:ActivatedRoute ) {}
   ngOnInit(){
  this.Tags= this.route.snapshot.params['name']


    this.route.params
    .subscribe((params: Params) => {
        this.red = this.Tags.includes ('red');
        this.purple = this.Tags.includes ('purple');
        this.blue = this.Tags.includes ('blue');
    }
  );
   }
  }

(HTML-тег компонента)

 <ul>
  <a><li *ngIf="red">red</li></a>
  <a><li *ngIf="blue">blue</li></a>
  <a><li *ngIf="purple">purple</li></a>
</ul>

(модуль приложения)

const appRoutes: Routes= [
  {path:'', component: AppComponent},
  {path:'tags/:name', component: TagsComponent}
];

Прямо сейчас, когда я пишу URL с именем цвета, в элементе списка появится только упомянутый цвет, и это именно то, что я хочу сделать.

пример

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

Я новичок в этом, поэтому я знаю, что мой вопрос может быть немного базовым, но любая помощь приветствуется

Спасибо

Answer 1

Вы можете попробовать что-то вроде этого:

this.route.params.subscribe(params => { 
console.log(params['name']);
});

Answer 2

Если в вашем примере вы хотите отформатировать URL-адрес следующим образом: ,, разделяя параметры тега, тогда split в , и используйте цикл ngFor в html для рендеринга каждого тега.

Попробуйте это

export class TagsComponent implements OnInit {
  constructor(private route: ActivatedRoute) { }

  public tags: string[];

  public ngOnInit(): void {
    this.setTags(this.route.snapshot.params);
    this.route.params.subscribe((params) => this.setTags(params));
  }

  private setTags(params): void {
    if (!params || !params['name']) { return; }
    this.tags = params['name'].split(',');
  }
}

<ul *ngIf="tags && tags.length">
  <a *ngFor="let tag of tags">
    <li>{{tag}}</li>
  </a>
</ul>