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

TypeScript - Append HTML to container element in Angular 2

提问by Gerald Hughes

What I want to do, is simply append some html on an element. I checked some links, and i find different confusing/non-working/non-recomended/etc solutions.

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

Using javascript I'll do something like this

使用 javascript 我会做这样的事情

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

How do I achieve the same result using typescript/angular2, RC5 ?

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

EDIT

编辑

The element with class .oneis generated by an external js, and I can't modify it

带class的元素.one是外部js生成的，修改不了

回答by Günter Z?chbauer

1.

1.

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

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

See also In RC.1 some styles can't be added using binding syntax

另请参阅在 RC.1 中，无法使用绑定语法添加某些样式

1. Alternatively

2. 或者

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

@ViewChild('one') d1:ElementRef;

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

or to prevent direct DOM access:

或防止直接 DOM 访问：

constructor(private renderer:Renderer) {}

@ViewChild('one') d1:ElementRef;

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

3.

3.

constructor(private elementRef:ElementRef) {}

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

回答by Juan

With the new angular class Renderer2

使用新的角度类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);
  }

回答by Stefan Svrkota

You could do something like this:

你可以这样做：

htmlComponent.ts

htmlComponent.ts

htmlVariable: string = "<b>Some html.</b>";//this is html in TypeScript code that you need to display

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

htmlComponent.html

htmlComponent.html

<div [innerHtml]="htmlVariable"></div>//this is how you display html code from TypeScript in your html

<div [innerHtml]="htmlVariable"></div>//这就是你如何在你的 html 中显示来自 TypeScript 的 html 代码

回答by Lorenzo Oliver

There is a better solution to this answer that is more Angular based.

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

1. Save your string in a variable in the .ts file

   MyStrings = ["one","two","three"]

2. In the html file use *ngFor.

   <div class="one" *ngFor="let string of MyStrings; let i = index"> <div class="two">{{string}}</div> </div>

3. if you want to dynamically insert the div element, just push more strings into the MyStrings array

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

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

   MyStrings = ["one","two","three"]

2. 在 html 文件中使用 *ngFor。

   <div class="one" *ngFor="let string of MyStrings; let i = index"> <div class="two">{{string}}</div> </div>

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

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

this way every time you click the button containing the myFunction(nextString) you effectively add another class="two" div which acts the same way as inserting it into the DOM with pure javascript.

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

回答by Daniel Danielecki

When working with Angular the recent update to Angular 8 introduced that a staticproperty inside @ViewChild()is required as stated hereand here. Then your code would require this small change:

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

@ViewChild('one') d1:ElementRef;

into

进入

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

OR

或者

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