使用角度创建包含动态加载的 HTML 的元素答案

【问题标题】：Creating an element containing dynamically loaded HTML with angular使用角度创建包含动态加载的 HTML 的元素
【发布时间】：2021-05-25 08:11:13
【问题描述】：

我要做的是在用户单击某个链接时加载包含某些内容的特定 HTML 文件，然后将其显示在特定位置的客户端页面上。如果没有 angular，我会执行 AJAX 请求来获取 HTML，然后将其包含在页面中，但似乎我不能以 angular 的方式这样做。我是 Angular 新手，所以可能有很多我不知道或不正确理解的事情。

我现在正在做的事情如下：每当用户点击一个特定的链接，比如这个：<a href="#" link="defn:test" class="mot-clef" (click)="onClickMotClef($event)">identités</a> 然后它调用那个函数：

onClickMotClef(event: Event): void {
event.preventDefault();
// On vérifie si le cadre n'est pas déjà chargé sur la page
let item = (event.target as HTMLElement);
var link = <string>item.getAttribute("link");
if (document.getElementById(link) == null) {
  /*
  Animation de chargement en attendant
  */
  //startLoadingAnimation();
  // On récupère le HTML du lien
  var filePath = "assets/cadres/".concat(link).replace(":", "-").concat(".html");
  // Pour rappel, le format de link devrait être prefixe:référence (defn:espace_vectoriel p. ex.)
  this.appService.getHTML(filePath).subscribe(
    (data: string) => {
      var temp = document.createElement("template");
      temp.innerHTML = data;
      let node = (temp.content as Node);
      item.parentNode!.parentNode!.parentNode!.insertBefore(node, item.parentNode!.parentNode!);
    }, // success path
    error => (console.log(error)) // error path
  );
  //Go sur l'ancre du
} else {
  // Le cadre est déjà charge sur la page, on y va directement
  //jump(link);
}
}

这里appService是一个查询链接并返回查询文件内容的服务：

import { Injectable } from '@angular/core';
import {
  HttpClient,
  HttpErrorResponse,
  HttpResponse
} from '@angular/common/http';

import { Observable, throwError } from 'rxjs';
import { catchError, retry } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class AppService {
  constructor(private http: HttpClient) {}

  getHTML(lien: string) {
    return this.http.get(lien, { responseType: 'text' }).pipe(
      retry(3), // retry a failed request up to 3 times
      catchError(this.handleError) // then handle the error
    );
  }

  private handleError(error: HttpErrorResponse) {
    console.log('error');
    return throwError('');
  }
}

这种方式虽然正确插入了div，但里面的html代码并没有正确显示，实际上是没有任何样式显示的。如何才能正确显示样式？

我相信这并不是真正的“角度”做事方式，我对角度还是很陌生。我还尝试了另一种方法，即创建一个模板为<div [innerhtml]="somevariable"></div> 的组件，然后在正确的位置动态创建这样一个组件。我遇到的主要问题是我完全不知道如何在正确的位置创建组件，该位置将在链接父级的父级之前。如果这是比我尝试做的更好的解决方案，那么我应该如何在我想要的位置创建一个组件，并将字符串“data”传递给该组件，以便它将正确解释为HTML ?

【问题讨论】：

所以这里有几个问题我看看我是否没看错，您没有看到您的 CSS 应用于您插入的呈现的 html？如果没有可重现的示例，我猜只是将encapsulation: ViewEncapsulation.None 添加到组件装饰器中就可以解决这个问题。第二部分可能会导致意见问题，因为有多种方法可以完成您所说的相同操作。这仅取决于您希望如何组织功能。
感谢您的回答。这正是我一直在寻找的，使用 ViewEncapsulation.None，现在我正在为要添加到页面的元素获得正确的样式。这样我就失去了应用于:host的样式，但我通过将组件放在一个div中解决了这个问题，我用应用于:host的样式设置了它的样式。再次感谢！

标签： html angular typescript

【解决方案1】：

感谢 Chris 的回答，我能够理解我所面临的实际问题，即样式封装未正确应用于添加的 HTML。我所要做的就是将encapsulation: ViewEncapsulation.None 添加到要添加新内容的组件中。

由于我对 :host 指令进行了一些样式设置，这在没有 ViewEncapsulation 的情况下没有任何意义，因此我必须将组件放在一个 div 中，然后设置该 div 的样式以获得整个组件的样式。

【讨论】：