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

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

使用javascript，我将执行以下操作

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

var d1=document.getElementsByClassName（'one'）；
d1.插入相邻的TML（'beforeend'，'two'）；

如何使用typescript/angular2、RC5获得相同的结果

编辑

类为

.one

的元素是由外部js生成的，我无法修改它

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

this.htmlToAdd='two'；

另见

或者

@ViewChild（'one'）d1:ElementRef；
ngAfterViewInit（）{
d1.nativeElement.insertAdjacentHTML（'beforeend'，'two'）；
}

或阻止直接DOM访问：

constructor(private renderer:Renderer) {}

@ViewChild('one') d1:ElementRef;

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

构造函数（私有呈现器：呈现器）{}
@ViewChild（“一”）d1:ElementRef；
ngAfterViewInit（）{
this.renderer.invokeElementMethod（this.d1.nativeElement'，'insertAdjacentHTML'['beforeend'，'two']）；
}

3.

构造函数（私有elementRef:elementRef）{}
ngAfterViewInit（）{
var d1=this.elementRef.nativeElement.querySelector（'.one'）；
d1.插入相邻的TML（'beforeend'，'two'）；
}

您可以这样做：

htmlComponent.ts

htmlVariable:string=“一些html。”//这是需要显示的类型脚本中的html代码

htmlComponent.html

//这就是在html中显示TypeScript中的html代码的方式
对于这个答案，有一个更好的解决方案，它更注重角度

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

MyStrings=[“一”、“二”、“三”]

在html文件中，使用*ngFor


{{string}}

如果要动态插入div元素，只需将更多字符串推入MyStrings数组

myFunction（下一个字符串）{
this.MyString.push（nextString）
}

这样，每次单击包含myFunction（nextString）的按钮时，都可以有效地添加另一个class=“two”div，其作用与使用纯javascript将其插入DOM的方式相同
 使用新的角度类

使用Angular时，Angular 8的最新更新引入了
@ViewChild（）
中的
静态属性，如前所述和所述。那么您的代码将需要进行以下小改动：

@ViewChild('one') d1:ElementRef;

进入

或

我的内容是由一个JS生成的，我不能修改它，因此不能使用[innerHtml]——如果htmlVariable是本机html标记，这是可行的，但是如何呈现自定义标记呢？比如htmlVariable在哪里？有什么想法吗？
vard1=this.elementRef.nativeElement.querySelector（'.one'）返回null:）我认为它在呈现HTMLT之前执行。这可能与您如何创建
.one
元素有关。由于某种原因，ngAfterviewinit必须是这样的：setTimeout（（）=>{var d1=this.elementRef.nativeElement.querySelector（'.one'）；d1.insertAdjacentHTML（'beforeend'，'two'）；}，1000）@jcdsr您可以尝试
ngAfterContentInit
。我不记得是哪一个先执行。用
insertAdjacentHTML
回答得很好。非常感谢你。MyStrings=[“这是开始”，“一些动态文本”

，“…这是结束”；当我们在html中循环时，angular会自动关闭第一个，然后最后一个有点坏。另一个例子是，如果数组中有一些表和td标记，那么我们可以动态创建表结构并添加动态文本。输出：这是开始一些动态文本，这是结束预期输出：一些动态文本…这是结束
@ViewChild('one') d1:ElementRef;

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

constructor(private renderer:Renderer) {}

@ViewChild('one') d1:ElementRef;

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

constructor(private elementRef:ElementRef) {}

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

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);
  }

@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;