为什么页脚组件先于其他组件加载？

Question

在这里，我一直在使用事件和页脚两个组件。目前，我在html中只有一个简单的h1标签，但稍后我将显示事件。

我的问题是在事件开始前已加载页脚。我先检查了页脚的控制台，然后才显示事件控制台。

这些是我正在处理的代码。有人可以帮我吗？谢谢

app.compoment.html

<app-navbar></app-navbar>
<ng-snotify></ng-snotify>

<div class="container">
    <router-outlet></router-outlet>
</div>
<div class="footer">
    <app-footer></app-footer>
</div>

events.component.ts

import { Component, OnInit } from '@angular/core';
import { EventService } from 'src/app/services/event.service';

@Component({
    selector: 'app-events',
    templateUrl: './events.component.html',
    styleUrls: ['./events.component.css']
})
export class EventsComponent implements OnInit {

    events = [];
    constructor(private _eventService: EventService) { }

    ngOnInit() {
        console.log("body");
    }
}

footer.component.ts

import { Component, AfterViewInit } from '@angular/core';

@Component({
    selector: 'app-footer',
    templateUrl: './footer.component.html',
    styleUrls: ['./footer.component.css']
})
export class FooterComponent implements AfterViewInit {

    constructor() { }

    ngAfterViewInit():void {
        console.log('footer');
    }

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { EventsComponent } from './components/events/events.component';
import { FooterComponent } from './components/footer/footer.component';

import { SnotifyModule, SnotifyService, ToastDefaults } from 'ng-snotify';

@NgModule({
  declarations: [
    AppComponent,
    EventsComponent,
 FooterComponent,
  ],

Answer 1

  

为什么页脚组件先于其他组件加载？

这是因为“其他组件”也被注入到i中。所以发生的是：

1. 主布局通过页脚标头和路由器出口呈现
2. 路由器插座已初始化
3. 其他组件已注入路由器出口。

Answer 2

通过此代码，它将发生。这段代码没有错。简单来说，当您运行应用程序时，它将首先运行app文件。然后angular将加载我们在module文件中设置的组件。您已在footer中分配了一个app.component.html，该变量总是首先加载，然后它将加载所有其他组件。

如您所见，您在app-footer中呼叫了app.component.html，而不是app-events。这就是为什么它先加载footer，然后再加载event的原因。

为避免这种情况：

解决方案1：

您可以在几秒钟内致电setTimeOut()。

解决方案2：

您可以使用emit和subscribe的方式。例如。 event加载完成后，发出事件并订阅应用程序文件。基于此您可以管理标志。然后可以根据标志设置footer部分。

解决方案3：

从路由文件传递标志并获取标志。基于此，您可以检查组件是否已加载。

在您的服务文件中：

import { EventEmitter } from '@angular/core';

public footer = new EventEmitter<any>();

现在从您的footer文件中

发射 .ts。

ngOnInit(){
   this.service.footer.emit();
}

现在订阅在页脚的构造函数中

this.service.footer.subscribe(){
   this.flag = true; 
}

现在在 app.component.html

中

<div *ngIf="flag">
   <app-footer> </app-footer>
</div>

Answer 3

我创建了一项公共服务

shared.services.ts

export class SharedService {

    loaded = false;

    constructor() { }

    setLoaded(cat: any) {
        this.loaded = cat;
    }

    checkLoaded() {
        return this.loaded;
    }
}

footer.component.html

<p *ngIf="loaded">
  footer works!
</p>

events.component.ts

constructor(private _eventService: EventService, private _sharedService: SharedService) { }

    ngOnInit() {
        this._eventService.getEvents()
            .subscribe(
                res => {
                    this._sharedService.setLoaded(true)
                },
                err => console.log(err)
            );
    }

footer.component.ts

constructor(private _sharedService: SharedService) { }

    ngAfterViewInit(): void {
        setTimeout(() => {
            this.loaded = this._sharedService.checkLoaded();
        }, 1000);

    }