Question

我一直在使用@HostBinding来添加它之前正常工作的类，但是在实现了Lazy Loading之后，即在加载组件时，这些类没有修改

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加载后，它没有工作，任何想法？

Answer 1

当加载模块作为延迟加载时，该模块将是某个其他模块的子模块，该模块的Host将只是它的父模块。为了获得更多信息，您可以通过https://github.com/angular/angular/pull/8451/files 并且特定问题的解决方案是使用BaseModule和延迟加载模块共享的服务或Events

Answer 2

我已经创建了一个服务并注入了模块并根据需要构建了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方法。

主机绑定不适用于延迟加载

2 个答案: