Question

ngOnInit() {    
   this.loadScript('assets/js/common.js');

 }

 // Load the scripts with url
public loadScript(url: string) {
  const body = <HTMLDivElement> document.body;
  const script = document.createElement('script');
  script.innerHTML = '';
  script.src = url;
  script.async = false;
  script.defer = true;
  body.appendChild(script);
}

我在组件中添加了以上代码以加载自定义js。在js文件中，我显示了一些jquery元素。它不是第一次工作。如果我刷新页面，它将工作正常。然后我导航到下一页，那时候也无法正常工作。如何解决此问题？

Answer 1

类似的问题，无法使用ngAfterViewInit解决。 javascript被调用，但第一次不起作用。当我重新加载页面时，它会一直保持工作状态。 javascript正在处理DOM。

代码如下：

import { Component, OnInit } from '@angular/core';
declare var ImageMap: any

function InitImageMapping()
{
  ImageMap('img[usemap]')
}

@Component({
  selector: 'app-buildingoverview',
  templateUrl: './buildingoverview.component.html',
  styleUrls: ['./buildingoverview.component.css']
})
export class BuildingoverviewComponent implements OnInit {


  message = "Click on the image!";

  constructor() { }

  ngOnInit(): void {
    //Mss moet ik dit verplaatsen naar een ander event?


  }

  ngAfterViewInit()
  {
    console.log("InitMaps")
    InitImageMapping();
  }

  clickImage(id: string)
  {
    this.message = `clicked on:${id}`
  }
}

Answer 2

好的，我现在开始工作了，只是插入了200毫秒的延迟。代码现在看起来像这样：

import { Component, OnInit } from '@angular/core';
import { timer } from 'rxjs';
declare var ImageMap: any

function InitImageMapping()
{

  ImageMap('img[usemap]')
}

@Component({
  selector: 'app-buildingoverview',
  templateUrl: './buildingoverview.component.html',
  styleUrls: ['./buildingoverview.component.css']
})
export class BuildingoverviewComponent implements OnInit {


  message = "Click on the image!";

  constructor() { }

  ngOnInit(): void {
    //Mss moet ik dit verplaatsen naar een ander event?


  }

  ngAfterViewInit()
  {
    console.log("InitMaps")
    timer(200).subscribe(x => { InitImageMapping()})
  }

  clickImage(id: string)
  {
    this.message = `clicked on:${id}`
  }
}

Angular 6 ngOnInit第一次不起作用

2 个答案: