javascript - 动态路由列表项

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

如果在您的示例中，您希望将 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>