Question

我在项目中实现了ng2-pdfjs-viewer，但是我对需要添加的方式不满意

<ng2-pdfjs-viewer [externalWindow]="true" [startPrint]="false" openFile="false" [useOnlyCssZoom]=true ...> 
</ng2-pdfjs-viewer>

对于要在其上运行的每个组件，因此我想提供一个服务，当我调用该服务的openPdf（）方法时，该html代码自动注入到组件的dom中。

我想要类似的东西

@Injectable()
export class PDFPreviewService {

pdfViewer: PdfJsViewerComponent; //will be the reference to the component
pdfViewerHTML: string //pdf viewer template that will be injected

constructor(private http: HttpClient) { }

private download(url: string): any {
    return this.http.get(url)
        .pipe(
            map((result: any) => {
                return result;
            })
        );
}

public openPdf(node: FileSystemNode): void {
    injectHTML();

    const url = node.file.url; 

    this.download(url).subscribe(
        (res) => {
            this.pdfViewer.pdfSrc = res;
            this.pdfViewer.refresh();
        }
    );
}
injectHTML() {
     //inject pdfViewerHTML to component dom...
}
}

有可能吗？

Answer 1

有可能做到这一点，但这不是一个好习惯。在以下说明中，我指的是Service HTML Injection Example

首先，您必须获取所注入组件的组件引用。然后将一个组件附加到appRef，使其位于ng组件树中。然后，您必须从组件中获取DOM元素，并将DOM元素附加到主体。然后等待一段时间，将其从组件树和DOM中删除。

但是正如我说的那样，这样做不是一个好方法，因为如果有东西注入并自动添加到想要的地方，您可能会失去对角度性能的控制。

从服务注入HTML到组件？

1 个答案: