模态不反对页面加载

Question

亲爱的，我有一个问题，我想在第一次访问加载时添加模态附加我不得不在 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>

在 TS 中：-

'''

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import { StoresService } from '../shared/stores.service';

@Component({
  selector: 'app-header-bar',
  templateUrl: './header-bar.component.html',
  styleUrls: ['./header-bar.component.css']
})
export class HeaderBarComponent implements OnInit {
  @ViewChild('openModal') openModal:ElementRef;
  data : Array<any>;

  constructor(private service : StoresService) {
    this.data = new Array<any>();
   }

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

  getstores(){
    this.service.getStores().subscribe(data=>{
      this.data = data;
    });
  }
  
  radioChangeHandler(event : any){
    this.data = event.target.value;
    localStorage.setItem("store",JSON.stringify(this.data));
  }
}

仍然无法正常工作谁能帮助我，因为我想强迫用户在浏览我的网站之前做出选择，我在另一个 post 上尝试了一些方法，但没有成功。

Answer 1

ngOnUnit 没有看到您需要在 AfterViewInit

中完成的 ViewChild 元素

export class HeaderBarComponent implements OnInit,AfterViewInit {

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

模态不反对页面加载

Modal doesn't oppend on page load

angular-ui-bootstrap

angular