Angularjs 意外的指令值'；未定义'；论构件观

我不熟悉这个世界。我的演示应用程序在控制台中显示以下错误：

browser_adapter.ts:88EXCEPTION: Unexpected directive value 'undefined' on the View of component 'Reddit'
browser_adapter.ts:88EXCEPTION: Error: Uncaught (in promise): Unexpected directive value 'undefined' on the View of component 'Reddit'
browser_adapter.ts:78EXCEPTION: Error: Uncaught (in promise): Unexpected directive value 'undefined' on the View of component 'Reddit'BrowserDomAdapter.logError @ browser_adapter.ts:78BrowserDomAdapter.logGroup @ browser_adapter.ts:89ExceptionHandler.call @ exception_handler.ts:53(anonymous function) @ application_ref.ts:304schedulerFn @ async.ts:131SafeSubscriber.__tryOrUnsub @ Subscriber.ts:240SafeSubscriber.next @ Subscriber.ts:192Subscriber._next @ Subscriber.ts:133Subscriber.next @ Subscriber.ts:93Subject._finalNext @ Subject.ts:154Subject._next @ Subject.ts:144Subject.next @ Subject.ts:90EventEmitter.emit @ async.ts:117onError @ ng_zone.ts:138onHandleError @ ng_zone_impl.ts:90ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233_loop_1 @ zone.js:487drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426
browser_adapter.ts:78STACKTRACE:BrowserDomAdapter.logError @ browser_adapter.ts:78ExceptionHandler.call @ exception_handler.ts:56(anonymous function) @ application_ref.ts:304schedulerFn @ async.ts:131SafeSubscriber.__tryOrUnsub @ Subscriber.ts:240SafeSubscriber.next @ Subscriber.ts:192Subscriber._next @ Subscriber.ts:133Subscriber.next @ Subscriber.ts:93Subject._finalNext @ Subject.ts:154Subject._next @ Subject.ts:144Subject.next @ Subject.ts:90EventEmitter.emit @ async.ts:117onError @ ng_zone.ts:138onHandleError @ ng_zone_impl.ts:90ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233_loop_1 @ zone.js:487drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426
browser_adapter.ts:78Error: Uncaught (in promise): Unexpected directive value 'undefined' on the View of component 'Reddit'
    at resolvePromise (zone.js:538)
    at PromiseCompleter.reject (zone.js:515)
    at eval (application_ref.ts:340)
    at ZoneDelegate.invoke (zone.js:323)
    at Object.onInvoke (ng_zone_impl.ts:67)
    at ZoneDelegate.invoke (zone.js:322)
    at Zone.run (zone.js:216)
    at zone.js:571
    at ZoneDelegate.invokeTask (zone.js:356)
    at Object.onInvokeTask (ng_zone_impl.ts:56)BrowserDomAdapter.logError @ 

我的

app.js

代码如下：

import { bootstrap } from "@angular/platform-browser-dynamic";
import { Component } from "@angular/core";

@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 Reddit {

    constructor() {

    }

    addArticle(title:HTMLInputElement, link:HTMLInputElement):void {
        console.log(`title: ${title.value} & link : ${link.value}`);
    }

}

@Component({
    selector: 'reddit-article',
    host: {
        class: 'row'
    },
    template: `
<div class="four wide column center aligned votes"<div class="ui statistic">
<div class="value">
{{ votes }}
</div>
<div class="label">
Points
</div>
</div>
</div>
<div class="twelve wide column">
<a class="ui large header" href="{{ link }}">
{{ 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 ArticleComponent{
    votes:number;
    title:string;
    link:string;

    constructor(){
        this.title='Angular 2';
        this.link='www.angular.io';
        this.votes=10;
    }

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

    voteDown(){
        this.votes=this.votes-1;
    }
}
bootstrap(Reddit);

从“@angular/platform browser dynamic”导入{bootstrap}”；
从“@angular/core”导入{Component}”；
@组成部分({
选择器：“reddit”，
指令：[ArticleComponent]，
模板：`
添加链接
标题：
链接：
提交链接
`
})
类Reddit{
构造函数（）{
}
addArticle（标题：HTMLInputElement，链接：HTMLInputElement）：无效{
log（`title:${title.value}&link:${link.value}`）；
}
}
@组成部分({
选择器：“reddit文章”，
主持人:{
类别：“行”
},
模板：`
第一个div是否缺少结束括号

<div class="four wide column center aligned votes"<div class="ui statistic">
<div class="value">
{{ votes }}
</div>

您应该先导入ArticleComponent，然后才能使用它：

import { bootstrap } from "@angular/platform-browser-dynamic";
import { Component } from "@angular/core";
import { ArticleComponent} from "wherever it is located";

@Component({
    selector: 'reddit',
    directives: [ArticleComponent],
    template:`

在
指令：[ArticleComponent]
行中，
ArticleComponent
尚未定义。您只需将
ArticleComponent
放在文件中
Reddit
类的上方。@NikosParaskevopoulos感谢它起作用：）我也遇到了同样的问题，这就解决了。谢谢