Как установить стиль подзаголовка, используя render2 в ionic? - PullRequest
Новая
       16

Как установить стиль подзаголовка, используя render2 в ionic?

0 голосов
/ 07 июня 2018

Я хочу скрыть заголовок и подзаголовок моего приложения отдельно в соответствии с количеством прокручиваемых пикселей.Это мой файл 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');


    }
}

Я мог скрыть заголовок, но не смог скрыть вложенный заголовок.Я понятия не имею, как получить доступ к подзаголовку с помощью рендера.

1 Ответ

0 голосов
/ 07 июня 2018

Я допустил ошибку в своем коде.так что я наконец-то понял.

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

это следует заменить на 

this.toolbar = this.header.nativeElement.children[1];
...