angular项目中打开新页面打印html页面

您可以使用Angular的内置Router模块来导航到新页面，然后使用JavaScript的window.print()函数来打印HTML页面。以下是示例代码：

在您的组件中，导入Router和ActivatedRoute模块：

import { Router, ActivatedRoute } from '@angular/router';

在构造函数中注入这些模块：

constructor(private router: Router, private route: ActivatedRoute) { }

在需要打印HTML页面的函数中，使用Router模块的navigateByUrl方法导航到新页面，并在导航完成后调用window.print()函数：

printPage() {
  const pageUrl = window.location.href;
  const newUrl = pageUrl.split('?')[0] + '/print'; // 添加“/print”路径
  this.router.navigateByUrl(newUrl).then(() => {
    window.print();
  });
}

在新页面的组件中，使用ActivatedRoute模块获取HTML页面的内容并显示在页面上：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-print',
  template: '<div [innerHTML]="htmlContent"></div>'
})
export class PrintComponent implements OnInit {
  htmlContent: string;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.htmlContent = this.route.snapshot.queryParamMap.get('html');
  }
}

在新页面的路由配置中，添加一个路由来匹配“/print”路径，并将HTML内容作为查询参数传递：

const routes: Routes = [
  { path: 'print', component: PrintComponent }
];

// 在导航时传递HTML内容
const queryParams = { html: '<h1>要打印的HTML内容</h1>' };
this.router.navigate(['/print'], { queryParams });

请注意，这只是一个简单的示例，您需要根据自己的需求进行修改和改进。