Html 如何使用字符串变量作为嵌入标记中的src链接？

我必须在我的项目中实现一个文档查看器。 由于限制，文档的链接作为路由器参数接收，并在doclauncher.ts文件中名为

link

的变量中正确接收 现在我在

doclauncher.html

文件中尝试了这两个选项，但它们似乎都不起作用：

div class="container">
  <embed id = "doc"
    src = ""
    type="application/pdf"
    height="100%"
    width="100%"
  />
</div>
<script>
  document.getElementById("doc").src= '+ {{link}} +'
</script>

---

我已经通过打印this.link来检查它是否正常：）

像这样使用setattribute

<script>
  document.getElementById("doc")setAttribute("src", "{{link}}")
</script>

document.getElementById（“doc”）setAttribute（“src”，“{{link}”）

{}括号依赖于框架。所以，当通过{{}语法调用时，需要检查框架或基础技术是否提供了值。试试console.log。通常是document.getElementById（“doc”）.src='+link+'；就JS而言应该已经足够了。我正在使用Angular 11.2.13和typescript。。。这也不起作用，然后只需运行console.log，查看是否有任何错误出现……如果上面的代码本身不起作用，则会因此而装载错误，或者如果代码起作用，但由于什么原因，链接值稍微落后，或者链接的作用域在其他地方，或者其值与预期值不符，控制台会声明这一点。在“开发人员工具”处于启用状态时，单击“刷新”以更新。我猜测{{}有它自己的计算开销，其中as src属性有它自己的线程，它的速度要快得多，在DOM内容就绪状态下执行的速度要比其他任何东西都快，并开始获取内容。尝试这个方法，获取实际值，该值将替换为{{link}。将其添加为字符串，例如src='/path/file.pdf'运行以查看代码是否有效。如果是这样，那么我们就有线程竞赛。浏览器对象模型在框架可以替换值之前以src方式执行。只需添加到上面，这就是我们进行延迟加载的方式。。。。。我们要么保持src值为空，然后通过触发器aka，当用户通过某个视图范围时，我们用实际值替换空值。该值更改的那个一刻，浏览器的启动将在不到一眨眼的时间内启动获取过程。这是BOM行为，您无法更改它。

 ngOnInit(): void {
      this.route.queryParams.subscribe(params => {
      this.link = params['link'];
    });
}

<script>
  document.getElementById("doc")setAttribute("src", "{{link}}")
</script>