如何在angular 8中的特定div元素上附加加载器组件？

<div *ngIf="showLoader" class="loader">
  <!-- 加载器的样式和动画 -->
</div>

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

@Component({
  selector: 'app-loader',
  templateUrl: './loader.component.html',
  styleUrls: ['./loader.component.css']
})
export class LoaderComponent {
  @Input() showLoader: boolean = false;
}

<div id="myDiv">
  <!-- 需要显示加载器的div元素 -->
</div>

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { LoaderComponent } from './loader/loader.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  @ViewChild(LoaderComponent) loaderComponent: LoaderComponent;
  showLoader: boolean = false;

  ngAfterViewInit() {
    // 在ngAfterViewInit生命周期钩子函数中动态加载加载器组件
    this.loaderComponent.showLoader = this.showLoader;
  }

  // 在需要显示加载器的时候调用该方法
  showLoaderOnDiv() {
    this.showLoader = true;
    this.loaderComponent.showLoader = this.showLoader;
  }

  // 在加载完成后隐藏加载器的时候调用该方法
  hideLoaderOnDiv() {
    this.showLoader = false;
    this.loaderComponent.showLoader = this.showLoader;
  }
}