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

Question

在加载内容之前已加载我的页脚。我的导航栏中有多个按钮，单击这些按钮可以打开一个新组件。当用户点击事件时，事件将从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

Answer 1

这很简单，因为您发出事件使页脚标志变为true。同样，您必须再次发出一个并订阅以使其为假。

在您的主要服务... 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获取数据时，您也再次调用了send。因此，当您获得数据时，它将自动启用页脚...

Answer 2

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

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

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

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

订阅后，还可以在应用程序组件上显式调用更改检测，以将模型中的新更改获取到视图中。这是因为subscribe来自RXJS，所以角度不知道该模型是否已更新，因此它不会调用更改检测。您可以进行以下调整，以明确地说出模型中发生的更改，然后为我调用更改检测

 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