如何根据来源点击在同一页面上过滤我的数据

Question

在我的数据库中，我有一个具有特定来源的名称列表。 在我的导航栏中，我有每个来源的链接。 我是角度新手，我的第一种方法是为每个来源创建一个“页面”。 我的问题是：这样做有什么捷径吗？ 喜欢：点击链接A，我正在页面上，我有原产地列表A。点击链接B，我仍然在同一页面上，但我有一个列表原产地B ...

每个原点的控制器 laravel（原点 1,2,3 ...）

 public function index()
{
    $identity = name::orderBy('name')->where('origin_link', 1)->get();
    return response()->json($identity);
}

html 角度（每个来源的页面完全相同）

<div class="ci">
<div class="container">
<ul *ngFor="let name of names">
    <li><a role="button">{{name.name}}</a></li>
</ul>
</div>
</div>

链接的html

 <div class="dropdown-menu">
        <a class="dropdown-item" routerLink="names">origin 1</a>
        <a class="dropdown-item" routerLink="names1">origin 2</a>
        <a class="dropdown-item" routerLink="names2">origin 3</a>
        <a class="dropdown-item" routerLink="names3">origin 4</a>
 </div>

ts（现在，他得到了所有的列表）

export class NamesComponent implements OnInit {
public names: string;

constructor(public namesService: NamesService
 ) { }

ngOnInit() {
this.namesService.index().subscribe((data:any) => {
  this.names= data;
 })
}

服务

index(): Observable<any> {
return this.http.get(this.apiUrl + '/names');
}

Answer 1

如果您想要每个来源的页面，我建议您使用 Route Parameters 。 你应该改变那条路线：

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'names/:id', component: NamesComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full' },
]

并更改路由器链接：

<div class="dropdown-menu">
    <a class="dropdown-item" [routerLink]="['/names',1]">origin 1</a>
    <a class="dropdown-item" [routerLink]="['/names',2]">origin 2</a>
    <a class="dropdown-item" [routerLink]="['/names',3]">origin 3</a>
    <a class="dropdown-item" [routerLink]="['/names',4]">origin 4</a>
</div>

在您的 NamesComponent 中，您应该检查加载数据的参数：

id: string
constructor(private route: ActivatedRoute) {}
ngOnInit(){
    this.id = this.route.snapshot.paramMap.get('id')
}