如何仅在Angular 2中打印特定内容

Question

我有一个带有按钮的父窗体，用于打开模态对话框。模态对话框的html是：

<div>
    <form class="form-horizontal" >
        <div class="col-md-12">
            <div class="form-group row">
                <label class="col-md-2 col-sm-3">Message:</label>
                <div class="col-md-6">
                    <p class="form-control-static ">Hello</p>
                </div>
            </div>
         </div>   
         <div class="col-md-12">
            <div class="btn-group ">
                <button type="button" class="btn btn-primary" (click)="print()">Print</button>
            </div>
        </div>
    </form>
</div>

组件中打印按钮的代码为：

public print = (): void => {
    window.print();
  }

但这也是在父表单中打印内容。我只想打印模态对话框的内容。此外，我不想通过使用DOM来处理这种情况。那么我们是否可以在不使用document.getElementbyID（不使用DOM）的情况下仅打印对话框内容。

以下网址中建议的解决方案; How to only show certain parts with CSS for Print?

不起作用，因为如果我关闭模态对话框然后按ctrl + p按钮那么它就不会打印父窗体，因为我们正在添加display：none。所以在父窗体上也应该有print选项，当打开模态对话框时，print选项应该只打印模态对话框内容。