如何在Angular 6中调用javascript中的onload函数？

Question

我正在将jquery游戏导入我的离子应用程序版本4，它基于Angular 6.我能够将所有必需的js和css文件导入到角度。但随着游戏开始使用

game.onload（）

在windows.load函数中，我在Angular 6中尝试了ngInit（）。但它无法正常工作！我如何使用Angular 6调用在javascript中使用变量定义的函数。

我的JS代码是：

var game = {
    data: {
        score: 0,
        steps: 0,
        start: !1,
        newHiScore: !1,
        muted: !1
    },
    resources: [{
        name: "bg",
        type: "image",
        src: "../data/img/bg.png"
    }, {
        name: "clumsy",
        type: "image",
        src: "../data/img/clumsy.png"
    }, {
        name: "pipe",
        type: "image",
        src: "../data/img/pipe.png"
    }, {
        name: "logo",
        type: "image",
        src: "../data/img/logo.png"
    }, {
        name: "ground",
        type: "image",
        src: "../data/img/ground.png"
    }, {
        name: "gameover",
        type: "image",
        src: "../data/img/gameover.png"
    }, {
        name: "gameoverbg",
        type: "image",
        src: "../data/img/gameoverbg.png"
    }, {
        name: "hit",
        type: "image",
        src: "../data/img/hit.png"
    }, {
        name: "getready",
        type: "image",
        src: "../data/img/getready.png"
    }, {
        name: "new",
        type: "image",
        src: "../data/img/new.png"
    }, {
        name: "share",
        type: "image",
        src: "../data/img/share.png"
    }, {
        name: "tweet",
        type: "image",
        src: "../data/img/tweet.png"
    }, {
        name: "theme",
        type: "audio",
        src: "../data/bgm/"
    }, {
        name: "hit",
        type: "audio",
        src: "../data/sfx/"
    }, {
        name: "lose",
        type: "audio",
        src: "../data/sfx/"
    }, {
        name: "wing",
        type: "audio",
        src: "../data/sfx/"
    }],
    onload: function() {
        return me.video.init(900, 600, {
            wrapper: "screen",
            scale: "auto",
            scaleMethod: "fit"
        }) ? (me.audio.init("mp3,ogg"), void me.loader.preload(game.resources, this.loaded.bind(this))) : void alert("Your browser does not support HTML5 canvas.")
    },
    loaded: function() {
        me.state.set(me.state.MENU, new game.TitleScreen), me.state.set(me.state.PLAY, new game.PlayScreen), me.state.set(me.state.GAME_OVER, new game.GameOverScreen), me.input.bindKey(me.input.KEY.SPACE, "fly", !0), me.input.bindKey(me.input.KEY.M, "mute", !0), me.input.bindPointer(me.input.KEY.SPACE), me.pool.register("clumsy", game.BirdEntity), me.pool.register("pipe", game.PipeEntity, !0), me.pool.register("hit", game.HitEntity, !0), me.pool.register("ground", game.Ground, !0), me.state.change(me.state.MENU)
    }
}; 

我想在游戏变量中调用onload函数！

我的角色代码是：

import { Component, OnInit } from '@angular/core';
import { NavParams  } from '@ionic/angular';
import { ActivatedRoute } from '@angular/router';
//declare function helloJS();
@Component({
  selector: 'app-test',
  templateUrl: './test.page.html',
  styleUrls: ['./test.page.scss'],
})
export class TestPage implements OnInit {
  id: string
  constructor(private route : ActivatedRoute) { 

  }

  ngOnInit() {
    game.onload();
  }
}

我试过上面的代码！但错误是cannot find name game。我知道它通常作为角度倾斜得到什么游戏！那我怎么称呼这个功能！请帮我！

Answer 1

导出变量

Demo.js

 exports.game = {
        data: {
            score: 0,
            steps: 0,
            start: !1,
            newHiScore: !1,
            muted: !1
        },
        resources: [{
            name: "bg",
            type: "image",
            src: "../data/img/bg.png"
        }, {
            name: "clumsy",
            type: "image",
            src: "../data/img/clumsy.png"
        }, {
            name: "pipe",
            type: "image",
            src: "../data/img/pipe.png"
        }, {
            name: "logo",
            type: "image",
            src: "../data/img/logo.png"
        }, {
            name: "ground",
            type: "image",
            src: "../data/img/ground.png"
        }, {
            name: "gameover",
            type: "image",
            src: "../data/img/gameover.png"
        }, {
            name: "gameoverbg",
            type: "image",
            src: "../data/img/gameoverbg.png"
        }, {
            name: "hit",
            type: "image",
            src: "../data/img/hit.png"
        }, {
            name: "getready",
            type: "image",
            src: "../data/img/getready.png"
        }, {
            name: "new",
            type: "image",
            src: "../data/img/new.png"
        }, {
            name: "share",
            type: "image",
            src: "../data/img/share.png"
        }, {
            name: "tweet",
            type: "image",
            src: "../data/img/tweet.png"
        }, {
            name: "theme",
            type: "audio",
            src: "../data/bgm/"
        }, {
            name: "hit",
            type: "audio",
            src: "../data/sfx/"
        }, {
            name: "lose",
            type: "audio",
            src: "../data/sfx/"
        }, {
            name: "wing",
            type: "audio",
            src: "../data/sfx/"
        }],
        onload: function() {
            return me.video.init(900, 600, {
                wrapper: "screen",
                scale: "auto",
                scaleMethod: "fit"
            }) ? (me.audio.init("mp3,ogg"), void me.loader.preload(game.resources, this.loaded.bind(this))) : void alert("Your browser does not support HTML5 canvas.")
        },
        loaded: function() {
            me.state.set(me.state.MENU, new game.TitleScreen), me.state.set(me.state.PLAY, new game.PlayScreen), me.state.set(me.state.GAME_OVER, new game.GameOverScreen), me.input.bindKey(me.input.KEY.SPACE, "fly", !0), me.input.bindKey(me.input.KEY.M, "mute", !0), me.input.bindPointer(me.input.KEY.SPACE), me.pool.register("clumsy", game.BirdEntity), me.pool.register("pipe", game.PipeEntity, !0), me.pool.register("hit", game.HitEntity, !0), me.pool.register("ground", game.Ground, !0), me.state.change(me.state.MENU)
        }
    }; 

然后导入组件内部

import { Component } from '@angular/core';
import * as games from '../assets/demo';

ngOnInit() {
    games.game.onload();
  }