Angular：动态渲染组件并获取组件的 HTML

渲染一个组件的 HTML，以便它可以用来打开一个类型为 about:blank 的新标签页（一个空白的新 HTML 页面，与应用程序本身无关）。

为什么？ 避免使用字符串变量来创建 HTML，例如：

var html = '<div>
              <h3>My Template</h3>
              ' + myProperty + ' 
            </div>';

我看到你可以使用 ViewContainerRef.createComponent 和 ComponentFactoryResolver 动态渲染组件。问题是，这样组件会被渲染在应用的视图容器中。我想做的是生成该组件的 HTML，然后我可以使用该 HTML 将其放置到我想要的任何地方。（在这种情况下，是放在 window.open() 方法返回的对象的 document 属性中）

示例：

@Component({
  selector: 'app-component',
  template: `
            <div>
              <h3>My Template</h3>
              {{ myProperty }}
            </div>
          `,
  styleUrls: ['./my.component.less']
})
export class MyComponent{
  myProperty: string;
}

我预计会以这种方式使用它：

//get new window tab
var newTab = window.open('about:blank', '_blank');

//get the HTML of the component

//use it to open the new tab
newTab.document.write(html);

答案＃1

这可能对其他人有帮助，所以我在这里发布了我所做的事情以及我遇到的问题。在查看了一些解决方案之后，这个对我有效。问题是我意识到 Angular 会清理你的 HTML，移除所有可能的 <script> 标签。不幸的是，我有大约 3 个这样的标签。此外，如果你不想让它们被清理，你必须使用一个叫做 DomSanitizer 的服务，并使用 bypassSecurityTrustScript 方法（文档），将脚本作为参数传入。所以“不将代码字符串化”的想法就不适用了。说到这里，我使用了原来的方法，将 HTML 存储在一个变量中，然后作为参数传递给 window.open。