Угловая директива 2 внутри тега тела html

Я пытаюсь создать директиву, которую я могу использовать внутри элемента тела html.Угловая директива 2 внутри тега тела html

Целью этой директивы является добавление или удаление класса.

Должна быть служба, определяющая, должен ли класс быть видимым или нет, потому что мне нужно будет управлять этим из разных компонентов.

Вопрос: Как переключить класс на элемент моего тела с помощью моего сервиса.

липкие-search.directive.ts

import { Directive, HostBinding, Inject, HostListener } from '@angular/core'; 
import { DOCUMENT } from '@angular/platform-browser'; 

import { SearchService } from '../shared/search.service'; 

@Directive({ 
    selector: '[mhStickySearch]' 
}) 
export class StickySearchDirective { 

    @HostBinding('class') onStickySearch() { 
    return this.searchService.isSearchSticky ? 'search-sticky' : ''; 
    } 

    @HostListener('window:scroll', []) onWindowScroll() { 
    let number = this.document.body.scrollTop; 

    if (number >= 65) { 
     this.searchService.enableStickySearch(); 
    } else { 
     this.searchService.disableStickySearch(); 
    } 
    } 

    constructor(private searchService: SearchService, @Inject(DOCUMENT) private document: any) { } 
}

@Hostlistner следующая директива является не запуска, если я положил его внутри тела тега. Но если я помещаю его как родителя, запускается @HostListner, но класс не отображается.

Вот мое тело тега, что AppComponent использует как селектор но закладывает как родителя компонента

<body class="full-width" mhStickySearch>

search.service.ts

import { Injectable } from '@angular/core'; 

@Injectable() export class SearchService { 

    isSearchSticky: boolean; 

    enableStickySearch() { 
    this.isSearchSticky = true; 
    } 

    disableStickySearch() { 
    this.isSearchSticky = false; 
    } 

    constructor() { } 

}

SearchService предоставляется в AppComponent. Служба выполнена из моих HeaderComponent так:

import { Component } from '@angular/core'; 
import { SearchService } from '../../search/shared/search.service'; 

@Component({ 
    selector: 'mh-header', 
    templateUrl: './header.component.html' 
}) 
export class HeaderComponent { 
    constructor(private searchService: SearchService) {} 

    openMobileMenu() { 
    this.searchService.enableStickySearch(); 
    } 

    closeMobileMenu() { 
    this.searchService.disableStickySearch(); 
    } 
}

источник

2017-01-23 Anonymous

Проблема заключалась в том, что я не могу использовать директивы вне AppComponent.

Поэтому я решил проблему, удалив мою директиву и вызвав javascript с моей службы.

import { Injectable } from '@angular/core'; 

@Injectable() 
export class SearchService { 

    isSearchSticky: boolean; 

    enableStickySearch() { 
    window.document.body.classList.add('search-sticky'); 
    this.isSearchSticky = true; 
    } 

    disableStickySearch() { 
    window.document.body.classList.remove('search-sticky'); 
    this.isSearchSticky = true; 
    } 

    constructor() { 
    const that = this; 

    window.onscroll = function() { 
     let number = this.document.body.scrollTop; 

     if (number >= 65) { 
     that.enableStickySearch(); 
     } else { 
     that.disableStickySearch(); 
     } 
    }; 
    } 
}

источник

2017-01-23 22:59:10

рекомендовать способ Angular4 заключается в использовании при условии объекта Document 'импорта {ДОКУМЕНТ} от '@ угловой/платформы-браузера;' – belzebu

@belzebu новый способ: '' 'импорта {ДОКУМЕНТ} от' @ angular/common '; '' '[см. docs] (https://angular.io/api/common/DOCUMENT) –

Угловая директива 2 внутри тега тела html

ответ

Смежные вопросы