Angular 模态不'；在页面加载时停止

亲爱的，我有一个问题，我想在第一次访问加载时进行模态附加 我必须用HTML编写以下代码

            <button type="button" id="openModal" (click)="getstores()" #openModal
                class="btn btn-outline-dark btn-sm ml-2" data-toggle="modal" data-target="#staticBackdrop">
                Choose Branch
            </button>

            <!-- Modal -->
            <div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1"
                aria-labelledby="staticBackdropLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="staticBackdropLabel">Choose your nearset branch 
                                <i class="fa fa-smile-wink"></i>
                            </h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="form-check form-check-inline" *ngFor="let d of data">
                                <input class="form-check-input" type="radio" name="store" id="inlineRadio1" (change)="radioChangeHandler($event)" value="{{d.name}}" >
                                <label class="form-check-label" for="inlineRadio1">{{d.name}}</label>
                              </div>
                              
                        </div>
                        <!-- <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary">Understood</button>
                        </div> -->
                    </div>
                </div>
            </div> 

选择分支
选择你的近集分支
&时代；
{{d.name}

在TS中：-

'''

从'@angular/core'导入{Component，OnInit，ElementRef，ViewChild}；
从“../shared/stores.service”导入{StoresService}；
@组成部分({
选择器：“应用程序标题栏”，
templateUrl:'./标题栏.component.html'，
样式URL:['./标题栏.component.css']
})
导出类HeaderBarComponent在Unit上实现{
@ViewChild（'openModal'）openModal:ElementRef；
数据：数组；
构造函数（专用服务：StoresService）{
this.data=新数组（）；
}
恩戈尼尼特（）{
this.openModal.nativeElement.click（）；
警报（“Hi”）；
}
getstores（）{
this.service.getStores（）.subscribe（数据=>{
这个数据=数据；
});
}
radioChangeHandler（事件：任意）{
this.data=event.target.value；
setItem（“store”，JSON.stringify（this.data））；
}
}

但仍然不起作用，请任何人帮助我，因为我想强迫用户在浏览我的网站之前进行选择，

---

我在stack overflow bu的另一篇文章中尝试了一些方法，但没有成功。

ngounit

没有看到您需要在

AfterViewInit

中执行的

ViewChild

元素

export class HeaderBarComponent implements OnInit,AfterViewInit {

ngAfterViewInit() {
    this.openModal.nativeElement.click();
    alert("Hi");
  }

---

您是否已将模态组件添加到entryComponents？

export class HeaderBarComponent implements OnInit,AfterViewInit {

ngAfterViewInit() {
    this.openModal.nativeElement.click();
    alert("Hi");
  }