Ionic 3 在点击时展开标题栏

11 浏览
0 Comments

Ionic 3 在点击时展开标题栏

我正在使用Ionic 3，并根据Joshmorony的教程实现了一个可展开的标题栏。

它在滚动时能够完美地展开：

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


    {我的内容在这里}

如果有人知道如何通过点击来扩展标题栏，请帮助我。感谢任何建议。谢谢。

0

1 答案

0 Comments

Ionic 3中，点击展开标题的问题是因为没有调用expandHeader函数导致的。解决方法是在ShrinkingSegmentHeader类中创建一个方法来展开标题，该方法使用Angular的Renderer2来设置元素的高度。为了演示，代码给ShrinkingSegmentHeader的HTML添加了一个按钮，用于调用expandHeader方法。需要注意的是，按钮仅用于演示，实际调用expandHeader方法的时机由用户决定，可以根据需要调用该方法。

如果需要从另一个组件调用expandHeader函数，可以参考以下问题的解答：

- [Angular 4 execute function from another component](https://stackoverflow.com/q/45303683/5730444)

- [How to call another component's function in Angular 2](https://stackoverflow.com/q/37587732/5730444)

- [Call child component method from parent class - Angular](https://stackoverflow.com/q/38974896/5730444)

另外需要注意的是，Angular的Renderer已经被弃用，建议使用Renderer2代替。

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

这个问题在许多地方都有被问到和回答过，上述的链接提供了一些相关的解决方案。如果想要从父组件或页面调用该方法，推荐使用ViewChild的最后一个解决方案，非常容易实现。

0