ジャバスクリプト

を用いangular2成分を調整私は、次のコードを有する： 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={}));

主人公-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に記載されているチュートリアルを実装しようとしていますが、動作させることができません。

id:0とname:"Archy"とHeroDetailComponentでheroプロパティはdirective:[app.HeroDetailComponent]が正しく実行されていることを示す図で現れます。ただし、<my-hero-detail>の場合はプロパティはselectedHeroの値に更新されません。

ご協力いただければ幸いです。

出典

2016-05-15 Archy

コンポーネントに入力を指定しようとします。 [ "英雄"] `へ*アプリ：

app.myComponent = ng.core.Component({ 
    selector : 'my-component', 
    template : "<div>hello {{test}}</div>", 
    inputs : ["Hero"] 
})

出典

2016-05-15 02:24:03

は'入力を追加：

活字体の例は、HeroDetailComponent

で

@Input() hero: Hero;

を持っている私は、そのためのjavascriptの構文があると信じています。 HeroDetailComponent *が私の問題を解決しました – Archy

答えて

関連する問題