Question

我目前正在处理一个个人项目，该项目需要显示多个文本部分。为了最大程度地减少这些部分的空间，我编写了一种折叠方法来将这些部分onClick折叠起来。

主要问题是，由于我使用@ViewChild-ElementRef收集div元素，因此我无法弄清楚如何对网页上的所有部分重新使用该方法。目前，我只能提出一种解决方案，那就是为要折叠的所有部分复制此方法。虽然，我很确定有一种更清洁的方法。

这是我的main.component中的.ts文件当前的样子：


@ViewChild('contentLorem')
   contentLorem: ElementRef;

   collapsed: boolean = false;

  constructor(private renderer: Renderer2) { }

  ngOnInit() {
  }


  collapse(){

      if (this.contentLorem.nativeElement.style.maxHeight){
        this.renderer.setStyle(this.contentLorem.nativeElement, 'maxHeight', 'null');
      } else {
        this.renderer.setStyle(this.contentLorem.nativeElement, 'maxHeight', `${this.contentLorem.nativeElement.scrollHeight + "px"}`);
        this.collapsed = true;
      } 

  }

  destroy(){
    this.contentLorem.nativeElement.style.maxHeight = null;
    this.collapsed = false;
    }


 <div class="section-block">
      <h5 class="section-header">Lorem Ipsum</h5>
      <p class="section-par">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit laborum illo saepe, eveniet
        et quisquam quaerat
        vel. Similique dolores, molestiae eos est maxime earum deserunt!</p>
        <div #contentLorem class="content">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
        <button *ngIf="collapsed == false" (click)="collapse()" class="btn btn-primary">Lees meer</button>
        <button *ngIf="collapsed == true" (click)="destroy()" class="btn btn-primary">Minder</button>
    </div>

我希望有人能够为我提供更清洁的解决方案。预先感谢！

Answer 1

您可以将参考变量#contentLorem传递给collapse()。

Answer 2

您可以使用@ViewChildren和一些用于跟踪此项是否折叠的数组来“解决”您的问题。

我将“ fix”用引号引起来，因为这感觉需要在单独的组件中进行操作（如果要添加按钮），或者需要使用指令（如果仅需要逻辑）。我将向您展示一个组件实现：

@Component({
  selector: 'collapse-content',
  template: `
    <div class="content" 
      [style.maxHeight.px]="collapsed ? content?.scrollHeight : null"
      #content
    >
      <ng-content></ng-content>
    </div>

    <button (click)="collapsed = !collapsed">
      {{ collapsed ? 'Minder' : 'Lees meer' }}
    </button>
  `,
  styles: [
    '.content { max-height: 100px; overflow: hidden }'
  ]
})
export class CollapseContentComponent  {
  collapsed = false;
}

您可以将父模板中的所有内容更改为以下内容：

<div class="section-block">
  <h5 class="section-header"> <!-- --> </h5>

  <p class="section-par"> <!-- --> </p>

  <collapse-content>
    <p>
      Lorem ipsum dolor sit amet, consectetur ...
    </p>
  </collapse-content>
</div>

示例：https://stackblitz.com/edit/angular-zaj1ir

如何使用ElementRef重用折叠方法（由@ViewChild收集）

2 个答案: