调用show()触发模态框异常：始终仅唤起myModal1的问题求助

嘿，我一眼就看出问题所在啦！你现在遇到的情况是因为Angular没办法区分你声明的两个ModalDirective实例，导致不管调用哪个的show()方法，实际都是第一个模态框在响应。

问题根源 #

你在component.ts里用@ViewChild(ModalDirective)来获取模态框实例，但因为两个模态框都是ModalDirective类型，Angular只会捕获DOM中第一个匹配该类型的元素，也就是你的myModal1。所以哪怕你调用this.myModal2.show()，实际触发的还是第一个模态框。

修复方案 #

只需要修改component.ts里的@ViewChild声明，通过模板引用变量名来指定要获取的实例，而不是只靠类型匹配：

// 把原来的声明改成这样
@ViewChild('myModal1') myModal1: ModalDirective;
@ViewChild('myModal2') myModal2: ModalDirective;

这样Angular就能精准对应到模板里你标记的#myModal1和#myModal2模态框了。

可选：针对旧Angular版本的补充 #

如果你用的是Angular 8及更早的版本，可能需要加上static参数（根据你的组件初始化逻辑选择true或false）：

@ViewChild('myModal1', { static: true }) myModal1: ModalDirective;
@ViewChild('myModal2', { static: true }) myModal2: ModalDirective;

修改完成后，再调用this.myModal1.show()和this.myModal2.show()，就能分别打开对应的模态框啦！

内容的提问来源于stack exchange，提问作者Reddy Bhavani Prasad