动态路由列表项

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>

（app模块）

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

现在，当我用其中的颜色名称编写URL时，只有提到的颜色会出现在列表项中，这正是我想要做的。

示例

现在一切都是硬编码我希望能够写出任何其他不在我的数组中的颜色，如绿色，并让数组更新，我的列表项目也相应显示。

我对此很陌生，所以我知道我的问题可能有点基本，但感谢任何帮助

谢谢

Answer 1

如果在您的示例中，您希望使用,格式化网址格式，将标记参数分隔为split上的,，并在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> 循环用于呈现每个标记的html。

试试这个

SELECT 
    c_from.country_name AS country_from,
    c_to.country_name AS country_to 
FROM 
    flightticket 
INNER JOIN 
    countries c_from 
ON 
    flightticket.country_from = c_from.country_id
INNER JOIN 
    countries c_to 
ON 
    flightticket.country_to = c_to.country_id

Answer 2

你可以尝试这样的事情：

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