Javascript 动态路由列表项

我有以下代码

（标签组件ts）

（标记组件html）

现在，当我写的颜色名称在它的URL只有提到的颜色会出现在列表项目，这正是我想做的

范例

现在一切都是硬编码的，我想能够写任何其他颜色，不在我的数组像绿色，让数组更新，我的列表项目显示相应的

我是一个新手，所以我知道我的问题可能有点基本，但任何帮助都是非常感谢的

---

感谢您

如果在您的示例中，您希望使用

，

分隔标记参数，然后在

，

上拆分

，并在html中使用
ngFor
循环来呈现每个标记

试试这个

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>

导出类标记组件实现OnInit{
构造函数（专用路由：ActivatedRoute）{}
公共标记：字符串[]；
public ngOnInit（）：void{
this.setTags（this.route.snapshot.params）；
this.route.params.subscribe（（params）=>this.setTags（params））；
}
私有设置标签（参数）：无效{
如果（！params | |！params['name']）{return；}
this.tags=params['name'].split（'，'）；
}
}

{{tag}}

您可以尝试以下方法：

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

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

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>

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