使用 javascript 协调 angular2 组件

Question

我有以下代码： 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 中给出的教程，但我无法让它工作。

HeroDetailComponent 中的 hero 属性与 id:0 和 name:"Archy" 出现在视图中表明 directive:[app.HeroDetailComponent] 正在执行正确。但是，<my-hero-detail> 的属性 hero 不会更新为 selectedHero.

的值

任何帮助将不胜感激。

Answer 1

尝试在您的组件中指定输入。

Typescript 示例有

   @Input() 
    hero: Hero;

在HeroDetailComponent

我认为 javascript 语法是：

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

使用 javascript 协调 angular2 组件

coordinating angular2 components using javascript

javascript

angular2-components

angular