Question

我有一个MainComponent，其中装载了所有其他组件。看起来像这样：

<div>
    <router-outlet name="navbar"></router-outlet>
</div>
<div class="container-fluid">
    <div class="card">
        <router-outlet></router-outlet>
        <router-outlet name="popup"></router-outlet>
    </div>
    <jhi-footer></jhi-footer>
</div>

包裹所有其他组件的卡类对于显示所有组件中的布局（如客户希望的那样）是必不可少的，但是我还被要求HomeComponent在没有卡的情况下显示大背景图像。

我可以继续从MainComponent剪切卡类div，并将其粘贴到每个组件html的内容作为第一层（HomeComponent html除外），但是有很多组件，我想提出一个更好的选择。

我当时正在考虑使用[ngClass]作为替代方案，以便在初始化HomeComponent时删除卡类，并在销毁卡类时将其重新添加。

HomeComponent：

ngOnInit() {
    this.homeService.messageDad(true);
}
ngOnDestroy() {
    this.homeService.messageDad(false);
}

HomeService：

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

@Injectable() 
export class HomeService {

  message = new BehaviorSubject<boolean>(false);

  constructor() { 

  }

  messageDad(data: boolean){
    this.message.next(data);
  }
}

MainComponent：

compState: boolean;

    constructor(
        private homeService: HomeService,
        private ref: ChangeDetectorRef
    ) {
        this.compState = true;
    }

ngOnInit() {
    console.log(this.compState)
}

ngAfterViewChecked() {
    console.log(this.compState)
    this.homeService.message.subscribe((event) => {
        this.compState = !this.compState;
    });
    this.ref.detectChanges();
    console.log(this.compState)
    this.ref.detach();
}

因此，我的模板如下：

<div>
    <router-outlet name="navbar"></router-outlet>
</div>
<div class="container-fluid">
    <div [ngClass]="{'card': compState}">
        <router-outlet></router-outlet>
        <router-outlet name="popup"></router-outlet>
    </div>
    <jhi-footer></jhi-footer>
</div>

这时它正在做一些奇怪的事情。加载首页时，Chrome浏览器会在compState布尔变量上为console.log（）显示多个true或false值（总计调用NgAfterViewChecked（）方法的11倍）。该类被删除，这是一种奇怪的满足感。但是随后，当转移到另一个组件时，该过程变得很棘手，不断地将卡类添加到其容器中并将其删除。

我一直在试图了解lyfecycle钩子，但我无法使其正常工作。

Angular 5-无法为BehaviourSubject设置适当的生命周期方法

0 个答案: