html bodyタグ内の角2のディレクティブ

html body要素の内部で使用できるディレクティブを作成しようとしています。html bodyタグ内の角2のディレクティブ

このディレクティブの目的は、クラスを追加または削除することです。

クラスを表示するかどうかを決定するサービスが必要です。別のコンポーネントから制御する必要があるためです。

質問：私のサービスの助けを借りて私のボディ要素のクラスを切り替えるにはどうすればいいですか？

スティッキー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は、私はbodyタグ内に置く場合トリガではないです。しかし、親として配置すると@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に提供されています。問題は、私はAppComponentの外ディレクティブを使用することはできませんということでした

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

：サービスは、このように私のHeaderComponentから実行されます。

私は自分のディレクティブを削除し、私のサービスからバニラのjavascriptを起動して問題を解決しました。 Angular4で

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

お勧めの方法は、 '角度/プラットフォームブラウザ@' から提供ドキュメントオブジェクト 'インポート{DOCUMENT}を使用することである。' – belzebu

@belzebu新しい方法がある： 'から ''インポート{DOCUMENT} @角度/共通 '; '' [docs]（https://angular.io/api/common/DOCUMENT） –

html bodyタグ内の角2のディレクティブ

答えて

関連する問題