Ionic 3在点击时展开标题

Question

我正在使用Ionic 3，并且已经实现了基于Joshmorony的tutorial的可扩展标头。

它在滚动扩展时非常有效：https://media.giphy.com/media/OSuVVWmVgvYI4e8QEu/giphy.gif

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

这是我的代码：

缩分段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代替。