2016-12-07 70 views
0

我一直在使用@HostBinding添加它工作正常早些時候類,但在加載組件實現延遲加載,即後懶洋洋這些類不修改主機綁定不上延遲加載

import { HostBinding, HostListener } from '@angular/core'; 

@Component({ 
    selector: 'body', 
    template: ` 
    <router-outlet></router-outlet> 
    ` 
}) 
export class AppComponent { 
    @HostBinding('class.login') page: boolean = false; 
    @HostBinding('class.nav-sm') isFixed: boolean = true; 
    @HostBinding('class.dashboard') isDashboard: boolean = false; 
} 

工作中使用他們我着陸頁是直接在構造函數中獲得AppComponent和修改類

使用:

export class LandingComponent { 
    constructor(private _rootComponent: AppComponent) { 

     this._rootComponent.page = false; 
    } 
} 

它不工作後Laziy Loading,任何想法?

+1

你是如何修改類的?你可以在Plunker中重現嗎?我不明白爲什麼這不應該與懶加載工作。 –

+0

關於我如何使用的更新代碼 – sudhir

+0

您是否在某處提供了'AppComponent'?在哪裏以及如何? –

回答

0

當加載模塊作爲延遲加載該模塊將是其他模塊的子模塊,該模塊的Host將只是它的父代。爲更全球化志願服務青年你可以通過https://github.com/angular/angular/pull/8451/files 和解決特定問題是使用由BaseModule和延遲加載模塊或Events

+0

所以,你的意思是,我應該在共享服務中創建主機綁定並使用它,而不是在AppComponent中執行? – sudhir

0

共享服務我已經創建了一個服務,並在模塊注入和構建的CSS對象(輸出變量,事件發射器)併發射它

在需要時訂閱該事件並設置主機綁定。

共享服務:

@Output() HostBindingCSS: EventEmitter<any> = new EventEmitter(); 


getCss() { 
     return this.HostBindingCSS; 
    } 

    setCSS(_page: boolean = false, _isFixed: boolean = true, _isDashboard: boolean = false) { 
     debugger; 
     var obj = { page: _page, isFixed: _isFixed, isDasboard: _isDashboard }; 

     this.HostBindingCSS.emit(obj); 
    } 

應用組件代碼:

export class AppComponent { 
    @HostBinding('class.login') page: boolean = false; 
    @HostBinding('class.nav-sm') isFixed: boolean = true; 
    @HostBinding('class.dashboard') isDashboard: boolean = false; 

    constructor(private _emsContextService: EMSContextService) { 

     this._emsContextService.getCss().subscribe(res => { 
      debugger; 
      this.page = res.page; 
      this.isFixed = res.isFixed; 
      this.isDashboard = res.isDasboard; 
     }); 
    } 
} 

在我這裏曾經要求我使用的服務,並調用setCSS方法頁。