点击时 Ionic 3 展开标题

Question

我正在使用 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>

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

Answer 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。