動的ルーティングリスト項目 - javascript、typescript、angular5

私は次のコードを持っています

（タグコンポーネント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を書くと、リストされた色だけがリスト項目に表示されます。これはまさに私がやりたいことです。

例

これですべてがハードコーディングされました。緑のように配列にない他の色を記述して、配列を更新し、それに応じてリストアイテムを表示できるようにしたいと思います。

私はこれにまったく慣れていないので、私の質問は少し基本的なものかもしれませんが、どんな助けでもありがたいです

ありがとうございました

回答：

回答№1は1

あなたの例であなたがそのような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>

---

回答№2の場合は0

あなたはこのようなことを試してみることができます：

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

---