Angular入门实践：StackBlitz环境下window.alert点击不触发排查

问题排查方向 #

• 先排查浏览器弹窗拦截：StackBlitz的预览页面是通过iframe内嵌加载的，绝大多数浏览器会默认拦截iframe内触发的alert弹窗，你可以看浏览器地址栏右侧有没有弹窗拦截的提示标识，手动允许该站点的弹窗权限后重试即可。
• 检查组件注册与依赖引入是否完整：如果是基于NgModule的项目，确认ProductListComponent已经被加入到对应NgModule的declarations数组中；如果是Angular14+的Standalone独立组件项目，确认组件@Component配置的imports数组中引入了CommonModule，否则*ngFor、*ngIf这类内置指令不会生效，会导致产品列表、按钮都无法正常渲染。同时确认父组件模板中已经正确写入<app-product-list></app-product-list>标签加载该组件。
• 确认products数据源是否有效：打开../products.ts文件检查导出的products数组是否为空，如果数组为空，*ngFor不会渲染任何内容，页面上根本不会出现Share按钮，自然触发不了点击事件。你可以先在模板的*ngFor循环外新增一个测试按钮绑定share方法，测试方法是否能正常触发，排除循环渲染的问题。
• 验证方法是否被实际调用：在share()方法内新增console.log('share 方法触发')代码，点击按钮后打开预览页面的控制台查看是否有对应日志输出。如果有日志但无弹窗，100%是弹窗拦截的问题；如果没有日志，再检查点击事件的绑定语法是否有误，比如是否用了中文括号、方法名拼写错误等，你当前给出的代码里绑定语法是正确的，重点看实际运行的代码有没有手误。
• 排查热更新与环境故障：StackBlitz有时会出现热更新失效的问题，代码修改后没有同步到预览页面，你可以尝试刷新预览页面、或者重启整个StackBlitz工作区重试，同时打开控制台查看是否有Angular编译、运行阶段的报错提示，根据报错内容定位问题。
• 排查子组件冲突：如果app-product-alerts子组件内部有阻止事件冒泡的逻辑，可以先注释掉该组件的引用，测试Share按钮的点击事件是否恢复正常，排除子组件的干扰。

内容的提问来源于stack exchange，提问作者Heather