如何在页脚之前加载内容? [英] How can I load the content before the footer?

问题描述

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

但是在那之后我转到另一个链接可以说特别然后页脚在事件之前加载.

我尝试如下:

events.component.ts

导出类 EventsComponent 实现 OnInit {事件 = [];构造函数(私有_eventService:EventService，私有服务:SharedService){}ngOnInit() {this._eventService.getEvents().订阅(资源=>{this.events = res,this.service.footer.emit(),},错误 =>控制台日志(错误));}}

共享服务

import { Injectable, EventEmitter, Output } from '@angular/core';@Injectable({提供在:'根'})导出类 SharedService {@Output() footer = new EventEmitter();构造函数(){}}

app.component.ts

导出类 AppComponent {标志:布尔值；构造函数(私有服务:SharedService){this.service.footer.subscribe(() => {this.flag = true ;console.log("标志是 ::: ",this.flag);})}}

app.component.html

<路由器插座></路由器插座><div class="footer" *ngIf="flag"><app-footer></app-footer>

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

解决方案

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

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

footerReset = new EventEmitter();

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

this.common.footerReset.emit();

在footer.component.ts

在构造函数中...

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

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

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

解决方案

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...

这篇关于如何在页脚之前加载内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！