FireShock:
私は、HTMLを生成し、印刷する新しいウィンドウで開きたいです。私がすべきは、HTMLを生成するコンポーネントがあります。
import { Component, ViewEncapsulation } from "@angular/core";
import { RelocateResponseVm } from "src/contracts/warehouse/relocateResponseVm";
@Component({
selector: 'transition-print',
styleUrls: ['./transition.component.scss'],
encapsulation: ViewEncapsulation.None,
templateUrl: './transition.print.component.html'
})
export class TransitionPrintComponent {
public data: RelocateResponseVm;
constructor() { }
}
そのテンプレートは次のとおりです。
<ng-container>
<div>
<h1>Operation №{{data.Id}}</h1>
<p>Date: <b>{{data.OperationDate}}</b></p>
<p>Name: <b>{{data.Name}}</b></p>
<p>Description: <b>{{data.Description}}</b></p>
</div>
</ng-container>
私は、次のコードでコンポーネントのインスタンスを作成します。
const componentFactory = this.resolver.resolveComponentFactory(TransitionPrintComponent);
let componentRef = componentFactory.create(this.injector);
componentRef.instance.data = relocateDoc;
console.log(componentRef.location.nativeElement);
かかわらず、relocateDoc
満たされているnativeElement
空です。
<transition-print>
<!---->
<div>
<h1>Operation №</h1>
<p>Date: <b></b></p>
<p>Name: <b></b></p>
<p>Description: <b></b></p>
</div>
</transition-print>
何が問題ですか?最終的なHTMLを埋めるためにどのように?さらに私は、新しいウィンドウにそれを置きます:
this.OpenWindow = window.open('', 'childwindow', 'width=800,height=400,left=150,top=200');
this.OpenWindow.document.body.innerHTML = "";
this.OpenWindow.document.body.appendChild(componentRef.location.nativeElement);
AlexanderFSP:
良い一日!
あなたはおそらく正しいことを行う、しかし:
- あなたは必要としない
ng-container
だけで、それを削除し、 - の入力プロパティとしてマークデータ
TransitionPrintComponent
(@Input() data;
) - 注入する
ViewContainerRef
コンポーネントで、あなたがのインスタンスを作成してみてくださいTransitionPrintComponent
。そして、このコードスニペットを試してみてください。
const componentFactory = this.resolver.resolveComponentFactory(TransitionPrintComponent);
const componentRef = this.vcr.create(componentFactory);
componentRef.instance.data = relocateDoc;
console.log(componentRef.location.nativeElement);
ここのリンクなので、あなたがより多くの細部を得ることができます。https://angular.io/guide/dynamic-component-loader#resolving-components
それが役に立てば幸い ;)