点击时 Ionic 3 展开标题

Posted 2023-02-23

【中文标题】点击时 Ionic 3 展开标题

【英文标题】：Ionic 3 expand header on click

【发布时间】：2019-08-06 02:33:00

【问题描述】：

我正在使用 Ionic 3，并基于来自 Joshmorony 的 tutorial 实现了可扩展标题。

它在滚动扩展时完美运行： https://media.giphy.com/media/OSuVVWmVgvYI4e8QEu/giphy.gif

我的问题是我想在单击而不是滚动时展开标题。当我点击菜单按钮时，标题会展开。

这是我的代码：

shrinking-segment-header.ts

  @Input('scrollArea') scrollArea: any;
  @Input('headerHeight') headerHeight: number;

  newHeaderHeight: any;

  ...

  ngAfterViewInit() 
    this.renderer.setElementStyle(this.element.nativeElement, 'height', this.headerHeight + 'px');
    this.scrollArea.ionScroll.subscribe((ev) => 
      this.resizeHeader(ev);
    );
  

  resizeHeader(ev) 
    ev.domWrite(() => 
      this.newHeaderHeight = this.headerHeight - ev.scrollTop;
      if (this.newHeaderHeight < 0) 
        this.newHeaderHeight = 0;
      
      this.renderer.setElementStyle(this.element.nativeElement, 'height', this.newHeaderHeight + 'px');
    );
  

我这样称呼组件：

dashboard.ts

<shrinking-segment-header [scrollArea]="myContent" headerHeight="190">
    my content here
<shrinking-segment-header>

如果有人知道如何在点击时欺骗可扩展标题，请帮助我。任何建议表示赞赏。谢谢。

【参考方案1】：

您可以简单地创建一个方法来扩展您的标题到初始高度（存储在this.headerHeight）。所以我在ShrinkingSegmentHeader 类中添加了以下代码：

expandHeader() 
    this.renderer.setElementStyle(this.element.nativeElement, 'height', this.headerHeight + 'px');

为了演示，我在ShrinkingSegmentHeader html 中添加了一个按钮来调用上述方法：

<ng-content></ng-content>
<button ion-button icon-only (click)="expandHeader()">
  <ion-icon name="beer"></ion-icon>
</button>

如前所述，按钮只是为了演示，当您希望标题扩展时调用该方法将是更棘手的部分，由您决定。根据您的用例，以下问题可能会有所帮助：

Angular 4 execute function from another component How to call another components function in angular2 Call child component method from parent class - Angular

---

另请注意，Angular renderer 已弃用。你应该改用Renderer2。

【讨论】：

如何从另一个组件调用expandHeader函数？

这已被多次询问和回答，我添加了一些可能相关的问题的链接。如果你想从父组件或页面调用方法，我推荐使用ViewChild的最后一个解决方案，它很容易实现。