Question

我想要做的只是在元素上添加一些html。我检查了一些链接，我找到了不同的混淆/不工作/非推荐的/ etc解决方案。

使用javascript我会做这样的事情

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

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

修改

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

Answer 1

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

constructor(private elementRef:ElementRef) {}

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

Answer 2

使用新的角度类gnome_builder_plugins_init.c

constructor(private renderer:Renderer2) {}

  @ViewChild('one') 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);
  }

Answer 3

你可以这样做：

<强> htmlComponent.ts

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

<强> htmlComponent.html

<div [innerHtml]="htmlVariable"></div> //这是您在html

中显示TypeScript的html代码的方法

Answer 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）的按钮时，你都会有效地添加另一个类=＆＃34;两个＆＃34; div的行为方式与使用纯javascript将其插入DOM相同。

Answer 5

使用Angular时，对Angular 8的最新更新引入了static内的@ViewChild()属性，如here和here所述。然后，您的代码将需要进行一些小的更改：

@ViewChild('one') d1:ElementRef;

进入

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

OR

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

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

5 个答案: