相关疑难解决方法(0)

我有这个模块,它将外部库与其他逻辑组件化,而无需将<script>标记直接添加到index.html中:

import 'http://external.com/path/file.js'
//import '../js/file.js'

@Component({
    selector: 'my-app',
    template: `
        <script src="http://iknow.com/this/does/not/work/either/file.js"></script>
        <div>Template</div>`
})
export class MyAppComponent {...}

我注意到importES6规范是静态的,并且在TypeScript转换过程中而不是在运行时解析.

无论如何要使它可配置,以便file.js将从CDN或本地文件夹加载？如何告诉Angular 2动态加载脚本？

我正在使用Angular 4和CLI创建一个Angular应用程序.我正在尝试将SkyScanner搜索小部件添加到我的一个组件中.

Skyscanner Widget示例

部分实现需要添加新的外部脚本:

<script src="https://widgets.skyscanner.net/widget-server/js/loader.js" async></script>

我不确定引用此文件的正确方法.如果我将脚本添加到我的index.html文件中,除非执行整页刷新,否则不会加载窗口小部件.我假设脚本在加载时尝试操作DOM,并且脚本运行时元素不存在.

仅在加载包含Skyscanner窗口小部件的组件时加载脚本的正确方法是什么？

我正在尝试使用speechSynthesis http://blog.teamtreehouse.com/getting-started-speech-synthesis-api

首先,我使用界面扩展了窗口:

window.interface.ts

export interface IWindow extends Window {
  webkitSpeechRecognition: any;
  speechSynthesis: any;
}

接下来我做了一个窗口服务:

window.service.ts

import { Injectable } from '@angular/core';
import { IWindow } from '../interfaces/window-interface';

function _window() : IWindow {
   return window;
}
@Injectable()
export class WindowService {
   get nativeWindow() : any {
      return _window();
   }
}

现在在组件中,我正在尝试实现它......没有成功..

app.component

import { Component, OnInit, ViewChild } from '@angular/core';
import { WindowService } from '../../providers/window.service';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['.app.component.scss']
})
export class AppComponent implements OnInit …

在我的角度体验中,我被迫使用四种不同的方式包括第三方库poliglot.js(用于multilang).

所以能new Polyglot(...)在我的Lang课程中使用:

export class Lang
{
    ...
    constructor() {

        this.polyglot = new Polyglot({ locale: 'en' });
        ...        
    }
    ...
}

我用这四种方法

A.在我很老的(2016)angular2(基于framerwork angular2-webpack-starter)项目中(目前这个解决方案由于缺乏require新角度项目的指令而无效):

var Polyglot = require('../../../node_modules/node-polyglot/build/polyglot.min.js');

B.在我的下一个项目angular4(基于angular2-webpack-starter):

import Polyglot from '../../../node_modules/node-polyglot/build/polyglot.min.js'; 

C.在我最近在Laravel项目中嵌入的angular5项目(基于angular-cli)

import * as Polyglot from '../../../node_modules/node-polyglot/build/polyglot.min.js';

D.我还发现了第4个解决方案,它适用于我的jQuery旧角度项目(基于angular2-webpack-starter)(并且互联网上的人们提到了很多这个解决方案)但我使用Polyglot示例写下来:

import '../../../node_modules/node-polyglot/build/polyglot.min.js';
declare var Polyglot: any;

// declare var $:any   // this is for jquery (as example)

问题是:这四种解决方案之间的区别是什么？是什么原因导致在某个项目中一个解决方案有效但其他解决方案无效