时间戳

首页 > 解决方案 > 如何根据来源点击在同一页面上过滤我的数据

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

问题描述

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

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

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

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

<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');
}

标签： angularlaraveltypescriptfiltersingle-page-application

解决方案

如果您想要每个来源的页面，我建议您使用 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')
}

推荐阅读