Как распечатать в Angular с шаблоном

Question

Я использую Angular2. Я нашел это решение: https://stackblitz.com/edit/angular-printing-solution-example-3?file=src%2Fapp%2Fapp.component.html Но я не совсем понимаю это.

В этом примере показана печать с app.component. html.

В моем приложении у меня есть recipe-detail.component. html, а внутри у меня есть кнопка с функцией print (). Я хотел бы напечатать содержимое с recipe-detail.component. html и включить LogoSite и footer.

Как мне это сделать?

Answer 1

В примере, который вы упомянули в вопросе, они используют window.print () для печати.

Изначально компонент app-print-page скрыт с помощью css

app-print-page {
  /* hide the printing component from @media screen */
  display: none;
}

. Используется следующий стиль для печати. Отображение компонентов app-main-page установлено на display: none, поскольку нам не нужно печатать это представление компонентов. app-print-page display установлен на display: block нам нужно напечатать вид этого компонента.

@media print {

  app-print-page {
    display: block;
  }

  app-main-page {
    display: none;
  }
}

вы можете повторно использовать эту же логику c в вашем компоненте.