我在一个 Angular 4 应用程序中工作，我在两个组件中有相同的手风琴。我想要做的是如果用户从第一个组件单击手风琴，我想获取所选手风琴的索引并通过它到第二个组件那里我将选定的手风琴设置为打开并在页面加载时显示其中的内容（不点击它）
目前我在第一个组件中有单个手风琴，如果从 API 绑定多个手风琴，则所选索引将动态更改。
这是我的代码：
【问题讨论】：
标签： html angular typescript bootstrap-4
您可以使用路由参数传递 id，例如查看以下示例代码：
one.component.html
<h5>One Component</h5>
<h6>Categories</h6>
<div class="accordion col-sm-12" id="accordion1" *ngFor='let data of dropdownData; let i=index'>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle h6" data-toggle="collapse" routerLink="/two/{{i}}" data-parent="#accordion1" href="#collapseTwo + i">
{{data?.CAMD_ENTITY_DESC}}
</a>
</div>
</div>
</div>
<br>
应用路线
const appRoutes: Routes = [
{path:'one',component:OneComponent},
{path:'two/:id',component:TwoComponent}]
two.component.ts
import { Component, OnInit, ViewChildren, QueryList, AfterViewInit, ElementRef } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { CartdataServiceService } from '../cartdata-service.service';
declare var $:any;
@Component({
selector: 'app-two',
templateUrl: './two.component.html',
styleUrls: ['./two.component.css']
})
export class TwoComponent implements OnInit,AfterViewInit {
dropdownData: any;
id:string;
@ViewChildren('accordian') components:QueryList<ElementRef>;
constructor( private route: ActivatedRoute, private CartdataService: CartdataServiceService) {}
ngOnInit() {
this.CartdataService.get_New_Products().subscribe(
data => {
this.dropdownData = data;
console.log(this.dropdownData);
});
this.id = this.route.snapshot.paramMap.get('id');
}
ngAfterViewInit(){
// print array of CustomComponent objects
this.components.changes.subscribe(() => {
let elem=this.components.toArray()[this.id];
$(elem.nativeElement).trigger("click");
console.log(elem);
});
}
}
现在您可以使用 id 并为手风琴选择所需的索引。
【讨论】：