Angular Universal 的 SSR 引擎不能直接处理 innerHTML 和 setProperty。解决方法包括使用 innerText 替代 innerHTML 或使用 DOM 操作代替 renderer.setProperty。
示例代码:
使用 innerText:
{{myText}}
// TypeScript Code
import { Component } from '@angular/core';
@Component({
selector: 'my-component',
template:
})
export class MyComponent {
myText = 'Hello World!';
setText() { this.myTextElement.innerText = this.myText; } }
使用 DOM 操作代替 renderer.setProperty:
// TypeScript Code
import { Component, ElementRef, Renderer2 } from '@angular/core';
@Component({
selector: 'my-component',
template: Some text...
})
export class MyComponent {
constructor(
private el: ElementRef,
private renderer: Renderer2
) {}
ngAfterViewInit() { const container = this.el.nativeElement.querySelector('#container'); const newParagraph = this.renderer.createElement('p'); const text = this.renderer.createText('New text...'); this.renderer.appendChild(newParagraph, text); this.renderer.appendChild(container, newParagraph); } }