我有以下代码：
index.html
<html>
<head>
<title>Angular 2 QuickStart JS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="assets/css/style.css">
<!-- 1. Load libraries -->
<!-- IE required polyfill -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/requirejs/require.js"></script>
<script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
<script src="node_modules/@angular/core/core.umd.js"></script>
<script src="node_modules/@angular/common/common.umd.js"></script>
<script src="node_modules/@angular/compiler/compiler.umd.js"></script>
<script src="node_modules/@angular/platform-browser/platform-browser.umd.js"></script>
<script src="node_modules/@angular/platform-browser-dynamic/platform-browser-dynamic.umd.js"></script>
<!-- 2. Load our 'modules' -->
<script src='app/hero-detail.require.js'></script>
<script src='app/app.component.js'></script>
<script src='app/main.js'></script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
app.component.js
(function (app) {
app.AppComponent = ng.core.Component({
selector: "my-app",
template: `<h1>My Heroes</h1>
<ul class="heroes">
<li *ngFor="let hero of heroes"
(click)="onSelect(hero)"
[class.selected]="hero === selectedHero">
<span class="badge">{{hero.id}}</span>{{hero.name}}
</li>
<my-hero-detail [hero]="selectedHero"></my-hero-detail>
</ul>`,
styles:[`
.selected {
background-color: #CFD8DC !important;
color: white;
}
.heroes {
margin: 0 0 2em 0;
list-style-type: none;
padding: 0;
width: 15em;
}
.heroes li {
cursor: pointer;
position: relative;
left: 0;
background-color: #EEE;
margin: .5em;
padding: .3em 0;
height: 1.6em;
border-radius: 4px;
}
.heroes li.selected:hover {
background-color: #BBD8DC !important;
color: white;
}
.heroes li:hover {
color: #607D8B;
background-color: #DDD;
left: .1em;
}
.heroes .text {
position: relative;
top: -3px;
}
.heroes .badge {
display: inline-block;
font-size: small;
color: white;
padding: 0.8em 0.7em 0 0.7em;
background-color: #607D8B;
line-height: 1em;
position: relative;
left: -1px;
top: -4px;
height: 1.8em;
margin-right: .8em;
border-radius: 4px 0 0 4px;
}
`],
directives: [app.HeroDetailComponent]
})
.Class({
constructor: function(){
this.title = "Tour of Heroes";
this.heroes = [
{ "id": 11, "name": "Mr. Nice" },
{ "id": 12, "name": "Narco" },
{ "id": 13, "name": "Bombasto" },
{ "id": 14, "name": "Celeritas" },
{ "id": 15, "name": "Magneta" },
{ "id": 16, "name": "RubberMan" },
{ "id": 17, "name": "Dynama" },
{ "id": 18, "name": "Dr IQ" },
{ "id": 19, "name": "Magma" },
{ "id": 20, "name": "Tornado" }
];
this.onSelect = function(hero){
this.selectedHero = hero;
console.log(hero);
}
}
});
})(window.app || (window.app={}));
hero-detail.component.js
(function (app) {
app.HeroDetailComponent = ng.core.Component({
selector: "my-hero-detail",
template: `<div *ngIf="hero">
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="hero.name" placeholder="name">
</div>
</div>`
}).Class({
constructor: function () {
this.hero = {
id: 0,
name: "Archy"
};
}
});
})(window.app || (window.app={}));
我正在尝试使用JavaScript实现https://angular.io/docs/ts/latest/tutorial/toh-pt3.html中给出的教程，但无法使其正常工作。
具有
hero和HeroDetailComponent的id:0中的name:"Archy"属性出现在视图中，指示directive:[app.HeroDetailComponent]正确执行。但是，hero的属性<my-hero-detail>不会更新为selectedHero的值。任何帮助将不胜感激。
最佳答案
尝试在组件中指定输入。
Typescript示例具有
@Input()
hero: Hero;
在
HeroDetailComponent中我相信它的JavaScript语法是：
app.myComponent = ng.core.Component({
selector : 'my-component',
template : "<div>hello {{test}}</div>",
inputs : ["Hero"]
})