angular总结-打印动态生成的组件

最新推荐文章于 2024-06-17 09:33:44 发布

qq_28813211

最新推荐文章于 2024-06-17 09:33:44 发布

阅读量576

点赞数

本文链接：https://blog.csdn.net/qq_28813211/article/details/102477407

版权

本文总结了在Angular中如何实现动态生成组件的打印功能，详细介绍了通过特定路由`print-document`来实现这一目标。在动态创建组件并绑定HTML和SCSS样式后，讨论了线上环境出现的加载速度慢的问题，指出可能与Angular的JIT和AOT编译模式有关，分析了两者之间的差异，并探讨了这种打印方法可能存在的限制。

摘要由CSDN通过智能技术生成

1、需求
打印文档，但是文档的打印，需要不同的格式和样式，所以模板和样式是动态的。
有关angular打印的组件不是很多，所以我们在网上找了
https://medium.com/@Idan_Co/angular-print-service-290651c721f9
网站，需要through the wall，该地址是告诉我们如何打印某一路由，我定义的是一个print路由，该路由定义的
在这里插入图片描述
prrint-document组件，现在的问题是，如何动态的给该组件绑定html和scss
，接下来的是核心,动态创建组件

  @Component({
  		selector: 'app-print',
  		template: `<ng-container #vc></ng-container>`,
  })
  @ViewChild('vc', { read: ViewContainerRef, static: true }) public vc: ViewContainerRef;
  public ngAfterViewInit(): void {
    this._compileComponent();
  }
  public _compileComponent(): void {
    const template = '<span>generated on the fly: </span><style>* {color: red;}</style>';
    // 定义组件类及其