时间戳

首页 > 解决方案 > 如何强制组件重新加载

angular - 如何强制组件重新加载

问题描述

我有一个 renderer2 可以更改模板上的元素。元素已 {{foo}} 更改为“Hello world”

如何重置元素以显示 {{foo}}

https://stackblitz.com/edit/renderer-setproperty-innerhtml-8gzjeg?file=app/app.component.ts

import { Component, Renderer2, AfterViewInit, ElementRef, ViewChild, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <div #el (click)="change()">{{foo}}</div>
  <button (click)="reset()">reset</button>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild('el') el: ElementRef;
  foo = 'click me'

  constructor(private renderer: Renderer2,
    private cdref: ChangeDetectorRef
  ) { }

  change() {
    this.renderer.setProperty(this.el.nativeElement, 'innerHTML', '<h1>Hello world</h1>');
  }
  reset() {
    this.cdref.detectChanges()
  }

}

我已经尝试过 this.cdref.detectChanges() 它不起作用

标签： angular

解决方案

不使用renderer2，为什么不使用innerHTML指令？它更容易管理您的代码，并且尽可能简单易懂。

只需从此替换您的代码：-

<div #el (click)="change()">{{foo}}</div>

对此：-

<div #el (click)="change()" [innerHTML]="foo"></div>

从此替换更改方法：-

change() {
    this.renderer.setProperty(this.el.nativeElement, 'innerHTML', '<h1>Hello world</h1>');
}

对此：-

change() {
    this.foo = '<h1>Hello world</h1>';
}

也从此替换重置方法：-

reset() {
    this.cdref.detectChanges()
  }

对此：-

reset() {
    this.foo = 'click me';
  }

https://stackblitz.com/edit/renderer-setproperty-innerhtml-8gzjeg?file=app/app.component.ts

推荐阅读