Question

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

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script>

angular.element(document).ready(function() { 
   var dvSecond = document.getElementById('dvSecond');
   angular.bootstrap(dvSecond, ['myApp1']);
});

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});

var app1 = angular.module("myApp1", []);
app1.controller("myCtrl1", function($scope) {
    $scope.firstName1 = "John1";
    $scope.lastName1 = "Doe1";
});
</script>
<!--If the script is here, the dvSecond div's expression is not evaulated-->
</head>
<body>
<!--If the script is here, the dvSecond div's expression is not evaulated-->
<div ng-app="myApp" id="dvFirst" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<div  id="dvSecond" ng-controller="myCtrl1">
{{ firstName1 + " " + lastName1 }}
</div>

<!--If the script is here, the dvSecond div's expression IS evaulated-->

</body>
</html>

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

Answer 1

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

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()
  }

}

这行得通，我什至在以下链接中编辑了stackblitz示例：

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

Answer 2

更改您的change方法和reset方法

 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)
  }

Demo

Answer 3

为什么不使用 innerHTML 指令而不使用renderer2？它更容易管理代码，而且理解起来也很简单。

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

<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

如何强制组件重新加载

3 个答案: