Angular2-angular2.dev.js:23501异常：在ArticleComponent上没有找到指令注释

Question

我正在跟随ng-book2编写一个简单的reddit克隆应用程序。到目前为止，我只有一个索引。html文件和单个应用程序。ts文件。

现在在我的应用程序中。ts文件，我声明了2个组件。第二个组件--reddit应该加载第一个组件--reddit文章和文章类。现在，在运行服务器时，出现以下错误：

angular2.dev.js:23501异常：在ArticleComponentBrowserDomA上没有找到指令注释dapter.log错误@angular2.dev.js:23501BrowserDomAdapter.log组@angular2.dev.js:[e-mail]:1185（匿名函数）@<[e-mail]:13533collection_1。StringMapWrapper.merge.on错误@angular2.dev.js:[e-mail]:1247（匿名函数）@angular2.dev.js:[e-mail]:1220lib$es6$promise$$内部$$try [e-mail]:468lib$es6$promise$$内部$$调用@angular2-polyfills.js:480lib$es6$promise$$内部$$发布@angular2-polyfills.js:451（匿名函数）@angular2-polyfills.js:123微任务@angular2.dev.js:13488区. run@angular2-polfills. js： 1243（匿名函数）@angular2. dev. js： 13456zoneBoundFn@angular2js： 262 angular2. dev. js： 23501 STACKTRACE： BrowserDomAdapter. logError@angular2. dev. js： 23501ExceptionHandler. call@angular2. dev. js： 1187（匿名函数）@angular2. dev. js： 12489NgZone._notifyOnError@angular2. dev. js：13533collection_1。StringMapWrapper. merge. onError@angular2. dev. js： 13437Zone. run@angular2-Polyfills. js： 1247（匿名函数）@angular2. dev. js： 13456zoneBoundFn@angular2-Polyfills. js： 1220lib$es6$promise$$内部$$try Catch@angular2-Polyfills. js： 468lib$es6$promise$内部$$调用@angular2-Polyfills. js： 480lib$es6$promise$内部$$发布@angular2-Polyfills. js： 451（匿名函数）@angular2-polfills. js： 123microment@angular2. dev. js： 13488Zone. run@angular2-polfills. js： 1243（匿名函数）@angular2. dev. js： 13456zoneBoundFn@angular2-polfills. js： 1220lib$es6$promise$asap$$flush@angular2-polfills. js： 262 angular2. dev. js： 23501错误：在新的BaseExcture（超文本传输协议：//localhost： 8080/node_modules/angular2/bundles/angular2.dev.js： 7385:21）在运行时MetadataResolver. getDirectiveMetadata（超文本传输协议：//localhost： 8080/node_modules/angular2/bundles/angular2. dev. js： 6688:13）在运行时MetadataResolver. getDirectiveMetadata（超文本传输协议：//localhost： 8080/node_modules/angular2/bundles/angular2. dev. js： 22724:47）在超文本传输协议：//localhost： 8080/node_modules/angular2/bundles/angular2. dev. js： 22792： 22在Array. map（本地）的Array. map（超文本传输协议：//localhost： 8080/node_modules/es6-shim/es6-shim. js： 1101:14）在RuntimeMetadataResolver. getViewDirectivesMetadata（超文本传输协议：//localhost： 8080/node_modules/angular2/bundles/angular2. dev. js： 22791:25）在TemplateCompiler的_compileNestedComponentRuntime（超文本传输协议：//localhost： 8080/node_modules/angular2/bundles/angular2. dev. js： 24763:63）在超文本传输协议：//localhost： 8080/node_modules/angular2/bundles/angular2. dev. js： 24748:26在Array. foreach（本机）

-----异步间隙------在_GetStackTraceWithUnCughtError处出错(http://localhost:8080/node_modules/angular2/bundles/angular2-多填料。js:2244:29）在分区。叉子(http://localhost:8080/node_modules/angular2/bundles/angular2-多填料。js:2293:47）在区域。束缚(http://localhost:8080/node_modules/angular2/bundles/angular2-多填料。js:1218:53）在bindArguments(http://localhost:8080/node_modules/angular2/bundles/angular2-多填料。js:1401:36）在lib$es6$promise$promise$$promise。obj。（匿名功能）[与当时一样](http://localhost:8080/node_modules/angular2/bundles/angular2-多填料。js:1413:46）在TemplateCompiler_compileComponentRuntime(http://localhost:8080/node_modules/angular2/bundles/angular2.dev.js:24741:14)在TemplateCompiler。compileHostComponentRuntime(http://localhost:8080/node_modules/angular2/bundles/angular2.dev.js:24693:14)在运行时。编译主机(http://localhost:8080/node_modules/angular2/bundles/angular2.dev.js:25044:37)在DynamicComponentLoader上。加载根(http://localhost:8080/node_modules/angular2/bundles/angular2.dev.js:12253:29)在迪尤1号。提供使用工厂(http://localhost:8080/node_modules/angular2/bundles/angular2.dev.js:12351:39)

-----异步间隙------在_GetStackTraceWithUnCughtError处出错(http://localhost:8080/node_modules/angular2/bundles/angular2-多填料。js:2244:29）在分区。叉子(http://localhost:8080/node_modules/angular2/bundles/angular2-多填料。js:2293:47）在NgZone_createInnerZone(http://localhost:8080/node_modules/angular2/bundles/angular2.dev.js:13444:39)在新工业区(http://localhost:8080/node_modules/angular2/bundles/angular2.dev.js:13310:32)在createNgZone(http://localhost:8080/node_modules/angular2/bundles/angular2.dev.js:12373:12)在平台上。应用(http://localhost:8080/node_modules/angular2/bundles/angular2.dev.js:12448:31)反对。引导(http://localhost:8080/node_modules/angular2/bundles/angular2.dev.js:25239:64)执行时(http://localhost:8080/app.js:76:23)至少，重新评估(http://localhost:8080/node_modules/systemjs/dist/system.src.js:2981:26)反对。执行(http://localhost:8080/node_modules/systemjs/dist/system.src.js:3099:13)

指数html:

<!doctype html>
<html>
  <head>
    <title>Angular 2 - Simple Reddit</title>
    <link rel="icon" type="image/png" href="resources/images/favicon-32x32.png" sizes="32x32" />
    <link rel="icon" href="resources/images/favicon.ico" />
    <!-- Libraries -->
    <script src="node_modules/es6-shim/es6-shim.js"></script>
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

    <!-- Stylesheet -->
    <link rel="stylesheet" type="text/css" href="resources/vendor/semantic.min.css">
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>

    <!-- Configure System.js, our module loader -->
    <script>
      System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app.js')
            .then(null, console.error.bind(console));
    </script>

    <!-- Menu Bar -->
    <div class="ui menu">
      <div class="ui container">
        <a href="#" class="header item">
          <img class="logo" src="resources/images/ng-book-2-minibook.png">
          ng-book 2
        </a>
        <div class="header item borderless">
          <h1 class="ui header">
            Angular 2 Simple Reddit
          </h1>
        </div>
      </div>
    </div>

    <div class="ui main text container">
      <reddit>Loading...</reddit> <!-- <--- Our app loads here! -->
    </div>

  </body>
</html>

应用程序。ts:

import { bootstrap } from 'angular2/platform/browser';
import { Component } from 'angular2/core';

@Component({
  selector: 'reddit-article',
  host: {
    class: 'row'
  },
  template: `
<div class="four wide column center aligned votes"> <div class="ui statistic">
<div class="value"> {{ article.votes }}
</div>
<div class="label">
Points
        </div>
      </div>
</div>
<div class="twelve wide column">
<a class="ui large header" href="{{ article.link }}"> {{ article.title }}
</a>
<ul class="ui big horizontal list voters">
<li class="item">
<a href (click)="voteUp()">
<i class="arrow up icon"></i> upvote
</a> </li>
<li class="item">
<a href (click)="voteDown()">
<i class="arrow down icon"></i>
downvote
</a> </li>
</ul> </div>
`
})

class Article {
  title: string;
  link: string;
  votes: number;

  constructor(title: string, link: string, votes?: number) {
    this.title = title;
    this.link = link;
    this.votes = votes || 0;
  }

  voteUp(): void {
    this.votes += 1;
  }

  voteDown(): void {
    this.votes -= 1;
  }
}

class ArticleComponent {
  article: Article;

  constructor() {
    this.article = new Article('Angular 2', 'http://angular.io', 10);
  }

  voteUp(): boolean {
    this.article.voteUp();
    return false;
  }

  voteDown(): boolean {
    this.article.voteDown();
    return false;
  }
}

@Component({
  selector: 'reddit',
  directives: [ArticleComponent],
  template: `
    <form class="ui large form segment">
      <h3 class="ui header">Add a Link</h3>
<div class="field">
<label for="title">Title:</label> <input name="title" #newtitle>
      </div>
      <div class="field">
        <label for="link">Link:</label>
        <input name="link" #newlink>
</div>
      <button (click)="addArticle(newtitle, newlink)"
              class="ui positive right floated button">
        Submit link
      </button>
</form> 
<div class="ui grid posts">
  <reddit-article>
  </reddit-article>
</div>`
})

class RedditApp {
  constructor() {
  }
  addArticle(title: HTMLInputElement, link: HTMLInputElement): void {
    console.log(`Adding article title: ${title.value} and link: ${link.value}`);
  }
}

bootstrap(RedditApp);

Answer 1

您在RedditApp的指令中列出了ArticleComponent，但ArticleComponent不是指令。它没有@Directive（...）或@Component（...）装饰器。

Answer 2

您在错误的类上定义了@Component：而不是ArticleComponent。您可以在RedditApp类的directives属性中设置ArticleComponent类。

你可以这样改变：

class Article {
  (...)
}

@Component({
  (...)
})
class ArticleComponent {
  (...)
}

@Component({
  (...)
})
class RedditApp {
  (...)
}