javascript – Angular 2测试应用程序停止加载

为Angular 2制作一个测试应用程序,但由于某些原因我无法解决,我的应用程序仍然停留在“正在加载…”

这是文件：

app.component.ts：

import {Component} from '@angular/core';
import {LittletourComponent} from './little-tour.component';

@Component({
    selector: 'my-app',
    template: `
    <h1>Test</h1>
    <little-tour></little-tour>
    `,
    directives: [LittletourComponent]
})
export class AppComponent { }

小tour.component.ts：

import {Component} from '@angular/core';

@Component ({
    selector: 'little-tour',
    template: `
        <input #newHero (keyup.enter)='addHero(newHero.value)'
        (blur)="addHero.(newHero.value); newHero.value = '' ">

        <button (click) = addHero(newHero.value)>Add</button>

        <ul><li *ngFor='let hero of heroes'>{{hero}}</li></ul>
    `,
})

export class LittletourComponent {
    heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
    addHero (value: string) {
        if (value) {
            this.heroes.push(value);
        }   
    }
}

index.html的：

<html>
  <head>
    <title>Angular 2 QuickStart</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="node_modules/core-js/client/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/systemjs/dist/system.src.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>

和main.ts：

import {bootstrap}    from '@angular/platform-browser-dynamic';
import {AppComponent} from './app.component';

bootstrap(AppComponent);

当我开始使用npm时,终端不会产生任何错误,但我确信在代码中我肯定错过了一些东西.由于我仍然试图围绕Angular 2的基础知识,所以非常感谢您的帮助.谢谢！

解决方法:

它现在用于此：

    <input #newHero (keyup.enter)='addHero(newHero.value)'
    (blur)="addHero" newHero.value = '' >

plunker

您可以将输入框中的值添加到列表中,如下所示：

<input  [(ngModel)] = "newHero">
<button (click) = addHero(newHero)>Add</button>
<ul><li *ngFor='let hero of heroes'>{{hero}}</li></ul>

javascript – Angular 2测试应用程序停止加载

相关推荐