Question

我对角度有点新意。

我想将外部角度脚本文件和页面上的javascript代码与角度5结合使用。我知道angular不会让你在html组件中包含javascript代码，但我知道有一种方法。

我以这种方式创建我的脚本文件：

var scriptElem = angular.element(document.createElement('script'))
scriptElem.attr("src", scriptUrl) // set var appropriately
element.append(scriptElem)

但是我需要整合这样的javascript代码。

function A(){

}

function B(){

}

function C(){

}

我可以渲染脚本元素。但我不能将该代码放在组件中，因为它不会呈现。所以我想出了一个解决方案，将该代码放在另一个脚本文件中并像以前一样动态加载它。我不确定它是否是理想的解决方案。

我的目标是将现有的javascript代码与angular集成，同时无法控制外部链接中的代码。

什么是理想的解决方案？

Answer 1

正如您想要集成现有代码一样。直接的方法是创建一个脚本标记并将您的js文件链接放入其中。

一种方法是使用 Renderer2 和 ElementRef 。官方文档建议谨慎使用ElementRef。

我建议你去看看这两节课。与使用document.getElementById('')相同。创建一个脚本标记并将您的js位置放入其中。

我刚写了一个简单的代码。在我当地测试过。

@Component({
  selector: 'app-dynamic-js',
  template: `<button class="btn" #iambtn id="iambtn">
            I AM A BUTTON JUST NOW
           </button>`,
  styleUrls: ['./dynamic-js.component.css']
})
export class DynamicJSComponent implements OnInit {
  @ViewChild('iambtn') imbtn: ElementRef;

  constructor(private renderer: Renderer2, private el: ElementRef) {}

  ngOnInit() {
    // setTimeout(() => {
    this.loadJS();
    // }, 2000);
  }

  loadJS() {
    let scriptTag = this.renderer.createElement('script');
    scriptTag.innerText =
      "console.log('i dont like'); prompt('nest scrpit demo');   document.getElementById('iambtn')";
    console.log(scriptTag, this.imbtn);
    this.renderer.appendChild(this.imbtn.nativeElement, scriptTag);
  }
}

如何将Angular 5与不同的JavaScript代码源相结合？

1 个答案: