首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何编程打开角4的手风琴

如何编程打开角4的手风琴
EN

Stack Overflow用户
提问于 2018-06-04 09:42:36
回答 1查看 2.3K关注 0票数 1

我在一个角4应用程序中工作,我在两个组件中有相同的手风琴,我想要做的是,如果用户从第一个组件点击手风琴,我想获取所选手风琴的索引并将它传递给第二个组件,我设置选定的手风琴打开并显示页面加载中的内容(不单击它)。

目前我在第一个组件中只有一个手风琴,如果多个手风琴从API绑定,所选的索引将动态变化。

这是我的代码:

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

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-06-04 10:02:41

您可以使用路由参数传递id,例如,查看下面的示例代码:

one.component.html

代码语言:javascript
运行
复制
<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>

应用程序路由

代码语言:javascript
运行
复制
const appRoutes: Routes = [
      {path:'one',component:OneComponent},
       {path:'two/:id',component:TwoComponent}]

two.component.ts

代码语言:javascript
运行
复制
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并选择手风琴所需的索引。

示例链接

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50677634

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档