Откройте ссылку шаблона angular в новом окне браузера

Question

Итак, вот объяснение проблемы, с которой я сталкиваюсь. Это может выглядеть очень похоже на другие уже заданные вопросы, но никто из них не ответил на мою проблему.

Я хочу открыть ссылку на шаблон angular в новом окне браузера (со всеми стилями) и использовать это окно для распечатайте содержимое, используя системный диалог печати.

Под ссылкой на шаблон я подразумеваю целый компонент или, может быть, только часть шаблона данного компонента.

Обратите внимание, что я не хочу делать это следующими способами:

1. Открытие нового маршрута в новом окне браузера. (Почему? Это приведет к тому, что все остальные вещи, такие как общая панель инструментов или помощь, откроются вместе с компонентом. Также потребуется новый маршрут, который нежелателен.)
2. Открытие содержимого в закрываемом модальном режиме.

Answer 1

Хорошо, вот как я это сделал, используя ComponentFactoryResolver и Injector. Просто вставьте эти две зависимости в ваш компонент, который хочет открыть другой компонент (в данном случае ReportComponent) в новом окне браузера.

Конструктор выглядит примерно так в следующем фрагменте кода.

  constructor(
    private resolver: ComponentFactoryResolver,
    private injector: Injector
  ) {}

. , .

Этот метод открывает компонент в новом окне браузера.

public openPrintableReport(): void {

// resolve and instantiate the component which you want to open in new window. 
const componentFactory = this.resolver.resolveComponentFactory(ReportComponent);
let component = componentFactory.create(this.injector);
component.changeDetectorRef.detectChanges();

// define external window
this.externalWindow = window.open('', '', 'width=1000,height=1000,left=150,top=200');

// copy all the styles to external window.
document.querySelectorAll('style').forEach(htmlElement => {
  this.externalWindow.document.head.appendChild(htmlElement.cloneNode(true));
});

this.externalWindow.document.title = 'Printer Friendly Report';

// attach the component to external window
this.externalWindow.document.body.appendChild(component.location.nativeElement);
}