脚本标签的 ViewChild 返回 undefined

Question

I need to access a script tag with ViewChild but it returns undefined when I try to access to nativeElement . It is working with a normal <p> tag but not with <script> .
Here is the stackblitz with an example (with p and script ).
I basically do:

@ViewChild('pRef', {static: false}) pRef: ElementRef;

and the in ngAfterViewInit():

this.pRef.nativeElement.innerHTML = "DOM updated succesfully!!!";

Answer 1

User Renderer2 and Document to inject your script dynamically.

in app.component.ts

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements AfterViewInit {
  name = 'Angular';

  @ViewChild('pRef', {static: false}) script: ElementRef;
  @ViewChild('prefworking', {static: false}) prefworking: ElementRef;
  constructor(
        private _renderer2: Renderer2, 
        @Inject(DOCUMENT) private _document: Document
    ) { }

    ngAfterViewInit() {
    this.prefworking.nativeElement.innerHTML = "Working pref"; 
    this.convertToScript();
  }

   convertToScript() {
         let script = this._renderer2.createElement('script');
        script.type = `text/javascript`;

        this._renderer2.appendChild(this._document.body, script);
    }
}

I have created the stackblitz. checkout this link https://stackblitz.com/edit/angular-8-viewchild-example-gaffzs