是否可以在使用ES6导入时将某些内容导入到提供变量名称的模块中？
即我想在运行时导入一些模块,具体取决于配置中提供的值:
import something from './utils/' + variableName;
我要将这个d3gauge.js文件导入到我的angular2组件memmon.component.ts文件中.
import '../../../../js/d3gauge.js';
export class MemMonComponent {
createMemGauge() {
new drawGauge(this.opt); //drawGauge() is a function inside d3gauge.js
}
}
并在相应的模板文件中添加
<script src="../../../../js/d3gauge.js"></script>
但它不起作用,drawGauge无法找到.
所以,
.ensure无法解决,因为无法解决.我正在使用Angular 4和CLI创建一个Angular应用程序.我正在尝试将SkyScanner搜索小部件添加到我的一个组件中.
部分实现需要添加新的外部脚本:
<script src="https://widgets.skyscanner.net/widget-server/js/loader.js" async></script>
我不确定引用此文件的正确方法.如果我将脚本添加到我的index.html文件中,除非执行整页刷新,否则不会加载窗口小部件.我假设脚本在加载时尝试操作DOM,并且脚本运行时元素不存在.
仅在加载包含Skyscanner窗口小部件的组件时加载脚本的正确方法是什么？
<head>
<script type="text/javascript">
function include(filename, status){
if(status == 'on'){
var head = document.getElementsByTagName('head')[0];
script = document.createElement('script');
script.src = filename;
script.type = "text/javascript";
head.appendChild(script);
} else {
// The code that wipes the script tag above
}
}
</script>
</head>
<body>
<input type="button" value="OPEN" onclick="include('script.js', 'on')">
<input type="button" value="CLOSE" onclick="include('', 'off')">
</body>
我想通过onclick事件删除标记中的特定标记.当我点击"关闭"按钮时,应该在ELSE区域写入什么代码？
我在这篇文章中看到你可以使用SystemJS将外部javascript文件加载到Angular 2中的组件中.
在我的index.html中:
<script>
System.config({
packages: {
"frontOfficeA2/src": {
format: 'register',
defaultExtension: 'js'
},
"angular2-jwt": {
"defaultExtension": "js"
},
"ng2-bootstrap": {
"defaultExtension": "js"
},
"system": {
"defaultExtension": "js"
}
},
map: {
"angular2-jwt": "lib/angular2-jwt",
"ng2-bootstrap": "lib/ng2-bootstrap",
"moment": 'lib/moment/moment.js',
"system": 'lib/systemjs/dist/system.src.js'
}
});
System.import('frontOfficeA2/src/app.js').then(null, console.error.bind(console));
</script>
我的组件:
import {Component} from 'angular2/core';
import { DATEPICKER_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap';
import { System } from 'system';
@Component({
selector: 'main',
templateUrl: 'app/components/main/main.html',
styleUrls: ['app/components/main/main.css'],
providers: [],
directives: [DATEPICKER_DIRECTIVES],
pipes: []
})
export class …我想进口aframe在<head>使用标签angular.json配置作为一个单独的包。
在里面，angular.json我有要从 node_modules 导入的脚本：
"scripts": [
"node_modules/aframe/dist/aframe-v1.0.0.min.js"
]
这是在 html 正文的底部捆绑和导入的。
<body>
<app-root></app-root>
...
<script src="scripts.js" ...>
</body>
这是不可取的，因为库特别要求我在<head>.
此外，我想将其作为单独的包导入：
"scripts": [
{ "input": "node_modules/aframe/dist/aframe-v1.0.0.min.js", "bundleName": "aframe-v1.0.0.min" }
]
基本上我想加载组件html特定的脚本文件,所以script我要把script文件引用放在组件html本身里面,我看到script在页面上渲染组件html时忽略了内部文件.
零件
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: 'test.html'
})
export class AppComponent { }
的test.html
<div>
<h1>My First Angular 2 App</h1>
</div>
<script src="test.js"></script>
上面是我的代码,我尝试了,我已经在test.js那里.
有没有办法加载组件特定的javascript文件与组件OR与其HTML？
我在angular1中有一个应用程序,我使用jquery在我的HTML元素中加载外部页面.这是我的容器元素的html:
<div id="externalContainer" class="text-center">
</div>
我使用以下脚本加载外部页面.
$( "#externalContainer" ).load( myExternalPageLink );
现在这似乎不适用于angular4,专家可以指导我如何在angular4中实现此功能？
我使用ASP.NET MVC应用程序引导了Angular.如何根据Angular视图的呈现条件加载MVC包.
Index.cshtml
<!DOCTYPE html>
<html ng-app="maypp">
<body>
<div class="container">
@*HEADER*@
<div header></div>
<div ui-view></div>
@*FOOTER*@
<div footer></div>
</div>
@Scripts.Render("~/bundles/bundle1")
@Scripts.Render("~/bundles/bundle2")
</body>
</html>
我只需要为Angular视图1加载bundle1.其他视图需要包括bundle1和bundle2.我正在使用AngularJS,而不是Angular 2.任何回复都表示赞赏.
有关如何在index.html文件中使用环境变量的任何想法..js script如果环境是prod 我需要包括A,如果环境是其他任何东西,我需要包括脚本B. 否则我需要index.html在部署之前手动更改文件.
我正在尝试在我的 angular.json 文件中使用环境变量。我怀疑这是不可能的，但我想我会看看是否有人知道如何。我使用它来指向服务器生成的信号器文件（问题是在开发与暂存时它是不同的 baseUrl）。所以... angular.json
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"ab-inbev-web2": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"tsConfig": "src/tsconfig.json",
"assets": [
"src/assets",
"src/favicon.ico"
],
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"http://site-dev.com/signalr/hubs"
and when on staging
"http://site-stage.com/signalr/hubs"
]
环境.ts
export const environment = {
baseUrlWithSlash: 'http://site-prod.com/',
logoffWarningTimeoutSeconds: 600,
production: true,
searchDelimiters: /[,;\n]+/
};
environment-local.ts
export const environment = {
baseUrlWithSlash: 'http://site-dev.com/',
logoffWarningTimeoutSeconds: 600,
production: true,
searchDelimiters: …angular ×8
javascript ×6
ecmascript-6 ×3
typescript ×2
aframe ×1
angularjs ×1
asp.net-mvc ×1
node.js ×1
skyscanner ×1
systemjs ×1
webpack ×1