Question

我为Ionic / Angular Apps创建了一个名为AccordionComponent的组件。这是组件类。

import { Component, ViewChild, OnInit, Renderer, Input } from '@angular/core';

@Component({
  selector: 'accordion',
  templateUrl: 'accordion.html'
})
export class AccordionComponent implements OnInit {

  accordionExapanded = false;
  @ViewChild("cc") cardContent: any;
  @Input('title') title: string;

  icon: string = "arrow-forward";

  constructor(public renderer: Renderer) {

  }

  ngOnInit() {
    console.log(this.cardContent.nativeElement);
    this.renderer.setElementStyle(this.cardContent.nativeElement, "webkitTransition", "max-height 500ms, padding 500ms");
  }

  close(){
       if (this.accordionExapanded) {
      this.renderer.setElementStyle(this.cardContent.nativeElement, "max-height", "0px");
      this.renderer.setElementStyle(this.cardContent.nativeElement, "padding", "0px 16px");
this.accordionExapanded = !this.accordionExapanded;
        this.icon = this.icon == "arrow-forward" ? "arrow-down" : "arrow-forward";

    }
  }

  toggleAccordion() {
    if (this.accordionExapanded) {
      this.renderer.setElementStyle(this.cardContent.nativeElement, "max-height", "0px");
      this.renderer.setElementStyle(this.cardContent.nativeElement, "padding", "0px 16px");

    } else {
      this.renderer.setElementStyle(this.cardContent.nativeElement, "max-height", "500px");
      this.renderer.setElementStyle(this.cardContent.nativeElement, "padding", "13px 16px");

    }

    this.accordionExapanded = !this.accordionExapanded;
    this.icon = this.icon == "arrow-forward" ? "arrow-down" : "arrow-forward";

  }

}

我在我的页面中使用此组件使用此组件，

<accordion *ngFor="let user of users; let i = index" [title]="user.name">
    <ion-list>
      <ion-item>
        Email: {{ user.email }}
      </ion-item>
      <ion-item>
        Phone {{ user.phone }}
      </ion-item>
      <ion-item>
        Website {{ user.website }}
      </ion-item>
    </ion-list>

  </accordion>

当一个手风琴扩展时，我无法找到关闭所有其他手风琴的方法。一旦Accordion扩展，我需要为所有Accordions调用close（）函数。有没有办法做到这一点？

Answer 1

使用setter将accordionExapanded更改为@Input。当手风琴获得点击时，将事件（此时为@Output）发送给父母，将其他人的accordionExapanded设置为false。另外，在setter中调用close（）或toggle（）基于accordionExapanded值。从close（）和toggle（）中删除accordionExapanded =！accordionExapanded。

Answer 2

您的手风琴组件应该听取父组件的一些输入，以决定它是关闭还是打开。由于你的手风琴是由* ngFor动态生成的，你最好通过使用我们的用户项来传递数据。

 export class AccordionComponent implements OnInit, OnChanges {

   @Input('accordionExpanded') accordionExpanded = false;     

   ngOnChanges(changes: SimpleChanges) {
      if(changes.hasOwnProperty('accordionExpanded')){
         this.accordionExpanded ? this.openAccordion() : this.closeAccordion();
      }
   }     
}

并且父组件侦听所有关闭的手风琴点击，并通过用户内部的参数通知所有手风琴。

export class ParentComponent implements OnInit{
    public users:Array<CustomUserType> = [];

    ngOnInit() {
       this.users.forEach(u => u.accordionExpanded = false);
    } 

    onClickAccordion(user){
      this.users.forEach(u => u.accordionExpanded = false);
      user.accordionExpanded = true;
   } 
 }     

 export interface CustomUserType extends YourUserType{
     accordionExpanded:boolean;
 }

这是模板

<accordion *ngFor="let user of users; let i = index" [title]="user.name" (click)="onClickAccordion(user)" [accordionExpanded]="user.accordionExpanded">
    <ion-list>
      <ion-item>
        Email: {{ user.email }}
      </ion-item>
      <ion-item>
        Phone {{ user.phone }}
      </ion-item>
      <ion-item>
        Website {{ user.website }}
      </ion-item>
    </ion-list>

  </accordion>

在另一个组件中调用一个函数

2 个答案: