How can I load the content before the footer?

问题

My footer is getting loaded before the content is loaded. I have multiple buttons in my navbar which when click opens a new component. When the user hits the events, it will emit after the event is loaded from the api. At this time footer is loading fine.

But after that I go to another link lets say special then footer is loading before the event.

I tried like below:

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>

Here is a Stackblitz: https://stackblitz.com/edit/angular-662ndm

回答1:

It is simple , as you emit event to make footer flag to true. In same way you have to again make one emit and subscribe to make it false.

In your main service... E.x common.service.ts

footerReset = new EventEmitter<any>();

Now when ever you change component or call any API you just have to emit event...

this.common.footerReset.emit();

In footer.component.ts

In constructor...

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

This will hide footer part. And you also call again emit when you got data from API. So it will automatically enable footer when you got data...

回答2:

It's because your ngOnInit is not firing on your route change , So your code won't execute. I think it's known issue. There are some alternative to execute ngOnInit explicitly.It's explain in the below thread

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

I would suggest move your code to the constructor , So constructor will call every time when the route change

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

Also call the change detection explicitly on your app component after subscribe to get the new changes in the model in to the view. It's because subscribe is from RXJS , So angular don't know the model is updated or not , So it won't call change detection. You can do the below tweak to say explicitly to angular something is changes in my model and call the change detection for me

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

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

Here is the working sample

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

来源：https://stackoverflow.com/questions/53048882/how-can-i-load-the-content-before-the-footer

标签

angular

angular6