0

我想根据滚动的像素量分别隐藏我的应用程序的标题和子标题。这是我的 home.html 文件：

<ion-header #head>
    <ion-navbar>
        <button class="nearby-btn" ion-button round color="light" icon- (click)="goToWhereToPage()"> Where to ?
            <ion-icon name="ios-arrow-down"></ion-icon>
        </button>
        <ion-title>Home</ion-title>
    </ion-navbar>

    <ion-toolbar class="toolbar1">
        <ion-title>Subheader</ion-title>
    </ion-toolbar>

</ion-header>

<ion-content display-header [header]="head">
    <div class="home-image">
        <img class="img" src="assets/hotel.jpg" alt="Home">
        <button class="nearby-btn" ion-button round color="light" icon- (click)="goToWhereToPage()"> Where to ?
            <ion-icon name="ios-arrow-down"></ion-icon>
        </button>
</ion-content>

我想访问子标题。我尝试了以下代码，作为自定义指令

    import { Directive, Input, ElementRef, Renderer2 } from '@angular/core';


@Directive({
    selector: '[display-header]', // Attribute selector
    host: {
        '(ionScroll)': 'onContentScroll($event)'
    }
}) export class DisplayHeaderDirective {

    @Input("header") header: HTMLElement;
    headerHeight;
    scrollContent;
    toolbar;
    constructor(public element: ElementRef, public renderer: Renderer2) {
        console.log('Hello DisplayHeaderDirective Directive');

    }

    onContentScroll(event) {
        // console.log(event);
        // if (event.scrollTop <220) {
        //     this.renderer.setStyle(this.header,'opacity', '0');
        //     this.renderer.setStyle(this.scrollContent, 'margin-top', '0px');
        //
        // }
        // else {
        //     this.renderer.setStyle(this.header, 'opacity', '1');
        //     this.renderer.setStyle(this.scrollContent, 'margin-top', '56px');
        // }

        // this.renderer.setStyle(this.toolbar,'opacity','0');
        this.renderer.setStyle(this.toolbar, 'opacity', '0');
    }

    ngOnInit() {


        this.headerHeight = this.header.clientHeight;
        this.renderer.setStyle(this.header, 'webkitTransition', '500ms');
        this.scrollContent = this.element.nativeElement.getElementsByClassName('scroll-content')[0];
        this.toolbar = this.element.nativeElement.children[0];
        this.renderer.setStyle(this.scrollContent, 'webkitTransition', 'margin-top 150ms');


    }
}

我可以隐藏标题，但我无法隐藏子标题。我不知道如何使用渲染访问子标题。

4

1 回答 1

0

我在我的代码中犯了一个错误。所以我终于想通了。

this.toolbar = this.element.nativeElement.children[0];

这应该替换为，

this.toolbar = this.header.nativeElement.children[1];
于 2018-06-07T08:39:37.360 回答