TypeScript - 将 HTML 附加到 Angular 2 中的容器元素答案

【问题标题】：TypeScript - Append HTML to container element in Angular 2TypeScript - 将 HTML 附加到 Angular 2 中的容器元素
【发布时间】：2016-12-31 18:22:13
【问题描述】：

我想做的只是在元素上附加一些 html。我检查了一些链接，发现了不同的混乱、无效、不推荐的解决方案。

使用 JavaScript，我会做这样的事情：

var d1 = document.getElementsByClassName('one');
d1.insertAdjacentHTML('beforeend', '<div class="two">two</div>');

如何使用 typescript/angular2、RC5 实现相同的结果？

编辑

.one类的元素是外部js生成的，我无法修改。

【问题讨论】：

标签： javascript angular typescript

【解决方案1】：

使用新的 Angular 类 Renderer2

constructor(private renderer:Renderer2) {}

  @ViewChild('one', { static: false }) d1: ElementRef;

  ngAfterViewInit() {
    const d2 = this.renderer.createElement('div');
    const text = this.renderer.createText('two');
    this.renderer.appendChild(d2, text);
    this.renderer.appendChild(this.d1.nativeElement, d2);
  }

【讨论】：

【解决方案2】：

在使用 Angular 时，最近对 Angular 8 的更新引入了 @ViewChild() 内的 static 属性，如 here 和 here 所述。那么您的代码将需要这个小改动：

@ViewChild('one') d1:ElementRef;

进入

// query results available in ngOnInit
@ViewChild('one', {static: true}) foo: ElementRef;

或

// query results available in ngAfterViewInit
@ViewChild('one', {static: false}) foo: ElementRef;

【讨论】：

【解决方案3】：

1.

<div class="one" [innerHtml]="htmlToAdd"></div>

this.htmlToAdd = '<div class="two">two</div>';

另见In RC.1 some styles can't be added using binding syntax

或者

<div class="one" #one></div>

@ViewChild('one') d1:ElementRef;

ngAfterViewInit() {
  d1.nativeElement.insertAdjacentHTML('beforeend', '<div class="two">two</div>');
}

或阻止直接 DOM 访问：

constructor(private renderer:Renderer) {}

@ViewChild('one') d1:ElementRef;

ngAfterViewInit() {
  this.renderer.invokeElementMethod(this.d1.nativeElement', 'insertAdjacentHTML' ['beforeend', '<div class="two">two</div>']);
}

3.

constructor(private elementRef:ElementRef) {}

ngAfterViewInit() {
  var d1 = this.elementRef.nativeElement.querySelector('.one');
  d1.insertAdjacentHTML('beforeend', '<div class="two">two</div>');
}

【讨论】：

var d1 = this.elementRef.nativeElement.querySelector('.one'); 返回 null :) 我认为它在呈现 html 之前执行
这可能与您创建.one 元素的方式有关。我没有这方面的任何信息。
出于某种原因，ngAfterviewinit 必须是这样的： setTimeout(() => { var d1 = this.elementRef.nativeElement.querySelector('.one'); d1.insertAdjacentHTML('beforeend' , '
两个
'); }, 1000);
@jcdsr 你可以试试ngAfterContentInit。我不记得哪个先执行。
insertAdjacentHTML 的出色回答。非常感谢。

【解决方案4】：

这个答案有一个更好的解决方案，它更基于 Angular。

将您的字符串保存在 .ts 文件中的变量中

MyStrings = ["one","two","three"]
在 html 文件中使用 *ngFor。

<div class="one" *ngFor="let string of MyStrings; let i = index"> <div class="two">{{string}}</div> </div>
如果要动态插入 div 元素，只需将更多的字符串压入 MyStrings 数组中

myFunction(nextString){ this.MyString.push(nextString) }

每次单击包含 myFunction(nextString) 的按钮时，您都会有效地添加另一个 class="two" div，其作用与使用纯 JavaScript 将其插入 DOM 的方式相同。

【讨论】：

例如。 MyStrings = ["
这是开始", "一些动态文本

", "...这是结束
";当我们在 html 中循环遍历它时，angular 会自动关闭第一个
，然后最后一个
有点坏了。另一个例子是，如果我们在数组打开和关闭中有一些 table 和 td 标签，那么我们可以动态创建表结构并添加动态文本。输出：
This is started
some dynamic text this is ending
预期输出：
some dynamic text ...这是结束

【解决方案5】：

你可以这样做：

htmlComponent.ts

htmlVariable: string = "<b>Some html.</b>"; //这是你需要显示的TypeScript代码中的html

htmlComponent.html

<div [innerHtml]="htmlVariable"></div> //这是您在 html 中显示来自 TypeScript 的 html 代码的方式

【讨论】：

我的内容是由JS生成的，无法修改，因此无法使用[innerHtml]
- 如果 htmlVariable 是本机 html 标签，则此方法有效，但如何呈现自定义标签？像
其中 htmlVariable 是 '?有什么想法吗？