如何以编程方式在 Angular 4 中打开手风琴

Posted 2023-03-13

【中文标题】如何以编程方式在 Angular 4 中打开手风琴

【英文标题】：How to programmatically open an Accordion in Angular 4

【发布时间】：2018-11-13 14:45:41

【问题描述】：

我在一个 Angular 4 应用程序中工作，我在两个组件中有相同的手风琴。我想要做的是如果用户从第一个组件单击手风琴，我想获取所选手风琴的索引并通过它到第二个组件那里我将选定的手风琴设置为打开并在页面加载时显示其中的内容（不点击它）

目前我在第一个组件中有单个手风琴，如果从 API 绑定多个手风琴，则所选索引将动态更改。

这是我的代码：

https://stackblitz.com/edit/angular-bootstrap-carousel-dynamic2-tsrt1w?file=app%2Fone%2Fone.component.html

【问题讨论】：

如果我点击应该在第一个和第二个组件中自动打开的印度香料？

不，它应该只在第二个组件中自动打开@PareshGami

【参考方案1】：

您可以使用路由参数传递 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 并为手风琴选择所需的索引。

Example Link

【讨论】：

this.id = this.router.snapshot.paramMap.get('id');这里出现了错误，因为属性快照不存在......而且我没有对第二个组件 HTML 进行任何更改？@NitishkumarSingh

你能不能在我的 stackblitz 文件中应用这个逻辑，如果你有时间请@NitishkumarSingh

那我如何在第二个组件@NitishkumarSingh 中打开菜单

兄弟，在我的项目中应用代码后，它在 stackblitz bot 中工作，但我没有收到任何错误@NitishkumarSingh