如何在页脚之前加载内容？答案

【问题标题】：How can I load the content before the footer?如何在页脚之前加载内容？
【发布时间】：2018-10-29 15:32:52
【问题描述】：

我的页脚在内容加载之前被加载。我的导航栏中有多个按钮，单击时会打开一个新组件。当用户点击事件时，它会在从 api 加载事件后发出。此时页脚加载正常。

但是在那之后我去另一个链接让我们说特殊然后页脚在事件之前加载。

我尝试如下：

events.component.ts

export class EventsComponent implements OnInit {

    events = [];
    constructor(private _eventService: EventService, private service: SharedService) { }
    ngOnInit() {
        this._eventService.getEvents()
            .subscribe(
                res => {
                        this.events = res,
                        this.service.footer.emit(),
                },
                err => console.log(err)
            );
    }
}

shared.service

import { Injectable, EventEmitter, Output } from '@angular/core';

@Injectable({
    providedIn: 'root'
})
export class SharedService {

    @Output() footer = new EventEmitter<any>();

    constructor() {}
}

app.component.ts

export class AppComponent {
    flag: boolean;

    constructor(private service: SharedService) {
        this.service.footer.subscribe(() => {
            this.flag = true ;
            console.log("Flag is ::: ",this.flag);
        })
    }
}

app.component.html

<app-navbar></app-navbar>
<router-outlet></router-outlet>
<div class="footer" *ngIf="flag">
  <app-footer></app-footer>
</div>

这是一个 Stackblitz： https://stackblitz.com/edit/angular-662ndm

【问题讨论】：

我不完全确定您要完成什么，但看起来您正在尝试使用标志变量来控制页脚的显示？每次有人导航时都需要将其重置为 false 吗？
不明白你的问题，预期的行为是什么？
@lupus137 是的，该标志每次都设置为 true，因此当另一个页面在内容之前导航页脚时显示。
所以您只需要先重置该字段。我会推荐一种方法，但我目前不太了解设置。
@SS 我认为您的 ngOnInit 没有在路由更改时触发。请检查我的答案。

标签： angular angular6

【解决方案1】：

这很简单，因为您发出事件以使页脚标志为真。以同样的方式，您必须再次发出并订阅以使其为假。

在您的主要服务中... E.x common.service.ts

footerReset = new EventEmitter<any>();

现在，当您更改组件或调用任何 API 时，您只需发出事件...

this.common.footerReset.emit();

在footer.component.ts中

在构造函数中...

this.common.footerReset().subscribe(() => {
    this.flag = false;
})

这将隐藏页脚部分。当您从 API 获取数据时，您还会再次调用 emit。所以当你有数据时它会自动启用页脚......

【讨论】：

@SS 将 console.log 放入 footerReset 订阅并检查错误是什么？
控制台没有错误。在每个组件构造函数中，我都有 this.common.footerReset 发出并在 ngOnInit 订阅上我设置 foot.emit() 来调用。
@SS 我必须检查你的代码。可以上传代码吗？
你能像以前一样给我stackblitz吗？
@SS 你的代码现在不工作了。 :( 我在控制台中没有得到任何东西。

【解决方案2】：

这是因为您的 ngOnInit 没有在您的路线更改时触发，所以您的代码不会执行。我认为这是已知问题。有一些替代方法可以显式执行 ngOnInit。它在下面的线程中进行了解释

https://github.com/angular/angular/issues/20112

我建议将你的代码移到构造函数中，这样每次路由改变时构造函数都会调用

 constructor(private service: SharedService) {
      this.service.footer.emit();
   }

还可以在订阅后在您的应用组件上显式调用更改检测，以将模型中的新更改添加到视图中。这是因为 subscribe 来自 RXJS ，所以 angular 不知道模型是否更新，所以它不会调用更改检测。您可以进行以下调整，以明确说明我的模型发生了变化，并为我调用变化检测

 constructor(private service: SharedService,private changeDetector: ChangeDetectorRef) {
    this.service.footer.subscribe(() => {

      this.flag = true;
      this.changeDetector.detectChanges();
      console.log("Flag is ::: ", this.flag);
    })
  }

这是工作示例

https://stackblitz.com/edit/angular-nd1euj-stackoverflow?file=src/app/app.component.ts

【讨论】：