如何将Angular变量作为iframe的src URL部分？Ionic开发求助

嘿，我正好遇到过类似的问题，这其实是Angular的安全机制在起作用，不是你写错了插值表达式哦！

问题根源 #

Angular自带的DomSanitizer会自动过滤掉它认为“不安全”的动态资源URL，防止XSS攻击。虽然你的插值表达式在a标签里能正常工作，但iframe的src属性受到更严格的安全限制——直接用{{ }}插值的URL会被Angular拦截，导致iframe无法加载正确的页面。

解决方案步骤 #

你需要手动将拼接好的URL标记为安全资源，具体操作如下：

1. 导入必要的模块
   在你的标签页组件中，导入DomSanitizer和SafeResourceUrl：

   import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
   

2. 注入DomSanitizer服务
   在组件的构造函数中注入DomSanitizer：

   constructor(private sanitizer: DomSanitizer) {}
   

3. 创建安全的URL属性
   在组件里定义一个属性来存储经过安全处理的URL，同时编写方法来拼接并处理日期和URL：

   today: Date = new Date();
   safeIframeUrl: SafeResourceUrl;
   
   ngOnInit() {
     this.generateSafeIframeUrl();
   }
   
   generateSafeIframeUrl() {
     // 手动格式化日期为dd_MM_yyyy格式（也可以复用Angular date管道的逻辑）
     const day = String(this.today.getDate()).padStart(2, '0');
     const month = String(this.today.getMonth() + 1).padStart(2, '0');
     const year = this.today.getFullYear();
     const formattedDate = `${day}_${month}_${year}`;
   
     // 拼接完整URL
     const baseUrl = '[first part of the url]'; // 替换成你的实际基础URL
     const fullUrl = `${baseUrl}${formattedDate}.html`;
   
     // 将URL标记为安全资源，告诉Angular这个地址是可信的
     this.safeIframeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(fullUrl);
   }
   

4. 在模板中绑定安全URL
   把iframe的src改成属性绑定，指向我们处理好的safeIframeUrl：

   <iframe [src]="safeIframeUrl" width="100%" height="100%" frameborder="0" allowfullscreen sandbox></iframe>
   

额外提示 #

如果需要日期动态更新（比如每天自动刷新URL），可以添加一个定时器或者监听日期变化的逻辑，重新调用generateSafeIframeUrl()方法即可。

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