Внедрить HTML в компоненты из службы?

Question

Я внедрил ng2-pdfjs-viewer в свой проект, но меня не устраивает то, как мне нужно добавить

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

к каждому компоненту, на котором я хочу его запустить, поэтому я хочу сделатьслужба, которая автоматически внедряет этот HTML-код в компонент компонентов, когда я вызываю метод openPdf () службы.

Я хочу что-то вроде

@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

Это возможно, но это не очень хорошая практика.В следующем объяснении я ссылаюсь на Пример внедрения HTML-кода

Сначала необходимо получить ссылку на компонент, в который вы добавили.Затем присоедините компонент к appRef, чтобы он находился внутри дерева компонентов ng.Затем вы должны получить элемент DOM из компонента и добавить элемент DOM в тело.Затем подождите некоторое время и удалите его из дерева компонентов и из DOM.

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