Angular：动态呈现和获取组件的HTML

Question

呈现组件的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);

Answer 1

它可能会帮助其他人，所以我在这里发布了我的工作以及发现的问题。在寻找了一些解决方案之后，this one为我工作。然后的问题是我意识到Angular清除了HTML并删除了所有可能的<script>标签。不幸的是我有3个。另外，如果您不希望对它们进行清理，则必须使用名为DomSanitizer的服务，并使用方法bypassSecurityTrustScript（doc）将脚本作为参数传递。因此，不对代码进行“字符串化”的想法就消失了。也就是说，我使用了原始方法，即将HTML存储在变量中，然后将其作为参数传递给window.open