我不确定如何将文件绑定(bind)到“my-app”选择器。 这是 plnkr 链接: http://plnkr.co/edit/2L5jSRK3adPZWTUwWdcP?p=preview
编辑:我认为如果我将模板代码放在index.html文件内的标签内，plunker可以显示一些内容
我想知道是否有人知道如何将模板网址附加到index.html文件，以便它显示模板网址而不是“正在加载...”
index.html 文件:
<!DOCTYPE html>
<html>
<head>
<script>document.write('<base href="' + document.location + '" />');</script>
<title>Angular 2 Tour of Heroes</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- Polyfill(s) for older browsers -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
<script src="https://npmcdn.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d9a3b6b7bcf7b3aa99e9f7eff7e8eb" rel="noreferrer noopener nofollow">[email protected]</a>?main=browser"></script>
<script src="https://npmcdn.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7d0f181b11181e09501018091c191c091c3d4d534c534e" rel="noreferrer noopener nofollow">[email protected]</a>"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.27/system.js"></script>
<script src="https://npmcdn.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8bfff2fbeef8e8f9e2fbffcbbaa5b3a5babb" rel="noreferrer noopener nofollow">[email protected]</a>/lib/typescript.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
<!--
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->
.ts 文件
import {Component, OnInit} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {Hero} from './hero';
import {HeroService} from './hero.service';
import {Observable} from'rxjs/Rx'
@Component({
selector: 'my-app',
templateUrl: 'app/biddingPage.component.html',
styleUrls: ['app/BiddingPage.component.css'],
providers: [HeroService],
directives: [ROUTER_DIRECTIVES]
})
export class BiddingPageComponent{
numberofbids = 0;
slot1 = 0;
myFunction(slotvalue)
{
this.slot1 = slotvalue;
this.numberofbids +=1;
}
ngOnInit(ticks){
let timer = Observable.timer(2000,1000);
timer.subscribe(t=>this.ticks = t);
}
upgradeTime = 172801;
ticks = this.upgradeTime;
timer(days, hoursLeft, minutesLeft, remainingSeconds) {
days = Math.floor(this.ticks/24/60/60);
hoursLeft = Math.floor((this.ticks) - (days*86400));
var hours = Math.floor(hoursLeft/3600);
minutesLeft = Math.floor((hoursLeft) - (hours*3600));
var minutes = Math.floor(minutesLeft/60);
remainingSeconds = this.ticks % 60;
if (remainingSeconds < 10) {
remainingSeconds = 0 + remainingSeconds;
}
document.getElementById('countdown').innerHTML = days + ":" + hours + ":" + minutes + ":" + remainingSeconds;
if (this.ticks == 0) {
clearInterval(this.countdownTimer);
document.getElementById('countdown').innerHTML = "Completed";
} else {
this.ticks--;
}
}
countdownTimer = setInterval('timer()', 1000);
}
最佳答案
你的配置文件有点困惑。
将文件目录从 src 更改为 app。例如 src/main.ts 到 app/main.ts
将您的 index.html 脚本标记更改为此
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
和你的config js到此
(function(global) {
var map = {
'app': 'app', // 'dist',
'rxjs': 'https://npmcdn.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="89fbf1e3fac9bca7b9a7b9a4ebecfde8a7bf" rel="noreferrer noopener nofollow">[email protected]</a>',
'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api' // get latest
};
var packages = {
'app': { main: 'main.ts', defaultExtension: 'ts' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' },
};
var packageNames = [
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/http',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router',
'@angular/router-deprecated',
'@angular/upgrade',
];
packageNames.forEach(function(pkgName) {
map[pkgName] = 'https://npmcdn.com/' + pkgName + ngVer;
});
packageNames.forEach(function(pkgName) {
packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
var config = {
transpiler: 'typescript',
typescriptOptions: {
emitDecoratorMetadata: true
},
map: map,
packages: packages
}
if (global.filterSystemConfig) { global.filterSystemConfig(config); }
System.config(config);
})(this);
关于javascript - Angular2 : Index. html不显示文件，只显示 "loading..."，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37092976/