Angular 如何强制重新加载零部件

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

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

从'@angular/core'导入{Component，renderr2，AfterViewInit，ElementRef，ViewChild，ChangeDetectorRef}；
@组成部分({
选择器：“我的应用程序”，
模板：`
{{foo}}
重置
`,
样式URL:['./app.component.css']
})
导出类AppComponent{
@ViewChild（“el”）el:ElementRef；
foo='单击我'
构造函数（专用渲染器：渲染器2，
私有cdref:ChangeDetectorRef
) { }
更改（）{
this.renderer.setProperty（this.el.nativeElement，'innerHTML'，'Hello world'）；
}
重置（）{
this.cdref.detectChanges（）
}
}

---

我已经尝试过这个.cdref.detectChanges（）它不起作用了

请检查下面的代码这对我有用：

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

@Component({
  selector: 'my-app',
  template: `
  <div #el>{{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
  ) { }
  reset() {
    alert('inside this')
    this.renderer.setProperty(this.el.nativeElement, 'innerHTML', '<h1>Hello world</h1>');
    this.cdref.detectChanges()
  }

}

从'@angular/core'导入{Component，renderr2，AfterViewInit，ElementRef，ViewChild，ChangeDetectorRef}；
@组成部分({
选择器：“我的应用程序”，
模板：`
{{foo}}
重置
`,
样式URL:['./app.component.css']
})
导出类AppComponent{
@ViewChild（“el”）el:ElementRef；
foo='单击我'
构造函数（专用渲染器：渲染器2，
私有cdref:ChangeDetectorRef
) { }
重置（）{
警报（'在此范围内'）
this.renderer.setProperty（this.el.nativeElement，'innerHTML'，'Hello world'）；
this.cdref.detectChanges（）
}
}

这很有效，我甚至在下面的链接中编辑了stackblitz示例：

---

更改

更改方法和
重置方法

 addTag = this.renderer.createEl[][1]ement('h1');
  change() {
    const text = this.renderer.createText('Click here');
    this.renderer.appendChild(this.addTag, text);
    this.renderer.appendChild(this.el.nativeElement,this.addTag);
  }
  reset() {
    this.renderer.removeChild(this.el.nativeElement, this.addTag)
  }

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

只需从以下位置替换代码：-

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

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

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

为此：-

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

就。。。首先不这样做，然后使用simpe*ngIf来显示{{foo}}或“Hello World”？或者将foo的值更改为“Hello World”？通过操纵DOM元素，您可以用Jquery的方式进行操作，但您可以在Angular中进行操作，而无需与navtive DOM元素交互。此代码只是我的问题的一个最小可复制版本。我的实际代码具有需要DOM操作的拖放功能。当用户拖动后放下时，我想重置组件，就像在@Niladri没有发生DOM操作一样，因此无法告诉angular重新绘制组件？您更改了什么？
change() {
    this.foo = '<h1>Hello world</h1>';
}

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

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