javascript - Angular2 : template work, 但 templateUrl 不是

Question

我想把html内容放在文件里，这样更容易理解。我有这个:

import { Component, OnInit } from '@angular/core';
import { CommentService } from '../services/Comment';
import { Comment } from '../class/Comment';

@Component({
  template: '<ul class="comments"><li *ngFor="let comment of Comments_array"><h3>{{comment.text}}</h3><span>{{comment.author}}</span></li></ul>',
  providers: [CommentService]
})

export class CommentsComponent implements OnInit {
    Comments_array: Comment[];

    constructor(private commentService: CommentService) { }

    ngOnInit() { 

        this.commentService.get_all_comments().subscribe(
        (data) => {
            this.Comments_array = data;
            console.log ( this.Comments_array );
        },
        (error) => {
            console.error(<any>error);
        });  

    }
}

此刻，效果很好，但如果我在 templateUrl: 'template/comments'

中更改模板

和模板/评论有:

<ul class="comments"><li *ngFor="let comment of Comments_array"><h3>{{comment.text}}</h3><span>{{comment.author}}</span></li></ul 

//同样的事情..

我收到这些错误:

window.controllers is deprecated. Do not use it for UA detection.nsHeaderInfo.js:412:8
Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.core.umd.js:241:9
EXCEPTION: Error: Uncaught (in promise): Template parse errors:
Unexpected character "EOF" ("For="let comment of Comments_array"><h3>{{comment.text}}</h3><span>{{comment.author}}</span></li></ul[ERROR ->]"): CommentsComponent@0:129platform-browser.umd.js:1909
EXCEPTION: Error: Uncaught (in promise): Template parse errors:
Unexpected character "EOF" ("For="let comment of Comments_array"><h3>{{comment.text}}</h3><span>{{comment.author}}</span></li></ul[ERROR ->]"): CommentsComponent@0:129platform-browser.umd.js:1900:17

STACKTRACE:platform-browser.umd.js:1900:17

resolvePromise@http://localhost/node_modules/zone.js/dist/zone.js:538:32
makeResolver/<@http://localhost/node_modules/zone.js/dist/zone.js:515:14
Zone</ZoneDelegate</ZoneDelegate.prototype.invoke@http://localhost/node_modules/zone.js/dist/zone.js:323:20
NgZoneImpl/this.inner<.onInvoke@http://localhost/node_modules/@angular/core//bundles/core.umd.js:9100:36
Zone</ZoneDelegate</ZoneDelegate.prototype.invoke@http://localhost/node_modules/zone.js/dist/zone.js:322:20
Zone</Zone</Zone.prototype.run@http://localhost/node_modules/zone.js/dist/zone.js:216:25
scheduleResolveOrReject/<@http://localhost/node_modules/zone.js/dist/zone.js:571:53
Zone</ZoneDelegate</ZoneDelegate.prototype.invokeTask@http://localhost/node_modules/zone.js/dist/zone.js:356:24
NgZoneImpl/this.inner<.onInvokeTask@http://localhost/node_modules/@angular/core//bundles/core.umd.js:9091:36
Zone</ZoneDelegate</ZoneDelegate.prototype.invokeTask@http://localhost/node_modules/zone.js/dist/zone.js:355:24
Zone</Zone</Zone.prototype.runTask@http://localhost/node_modules/zone.js/dist/zone.js:256:29
drainMicroTaskQueue@http://localhost/node_modules/zone.js/dist/zone.js:474:26
ZoneTask/this.invoke@http://localhost/node_modules/zone.js/dist/zone.js:426:22
platform-browser.umd.js:1900:17

Unhandled Promise rejection: Template parse errors:
Unexpected character "EOF" ("For="let comment of Comments_array"><h3>{{comment.text}}</h3><span>{{comment.author}}</span></li></ul[ERROR ->]"): CommentsComponent@0:129 ; Zone: angular ; Task: Promise.then ; Value: Object { message: "Template parse errors: Unexpected c…", stack: "BaseException$1@http://localhost/no…" }zone.js:461:14

Error: Uncaught (in promise): Template parse errors:
Unexpected character "EOF" ("For="let comment of Comments_array"><h3>{{comment.text}}</h3><span>{{comment.author}}</span></li></ul[ERROR ->]"): CommentsComponent@0:129
Stack trace:
resolvePromise@http://localhost/node_modules/zone.js/dist/zone.js:538:32
makeResolver/<@http://localhost/node_modules/zone.js/dist/zone.js:515:14
Zone</ZoneDelegate</ZoneDelegate.prototype.invoke@http://localhost/node_modules/zone.js/dist/zone.js:323:20
NgZoneImpl/this.inner<.onInvoke@http://localhost/node_modules/@angular/core//bundles/core.umd.js:9100:36
Zone</ZoneDelegate</ZoneDelegate.prototype.invoke@http://localhost/node_modules/zone.js/dist/zone.js:322:20
Zone</Zone</Zone.prototype.run@http://localhost/node_modules/zone.js/dist/zone.js:216:25
scheduleResolveOrReject/<@http://localhost/node_modules/zone.js/dist/zone.js:571:53
Zone</ZoneDelegate</ZoneDelegate.prototype.invokeTask@http://localhost/node_modules/zone.js/dist/zone.js:356:24
NgZoneImpl/this.inner<.onInvokeTask@http://localhost/node_modules/@angular/core//bundles/core.umd.js:9091:36
Zone</ZoneDelegate</ZoneDelegate.prototype.invokeTask@http://localhost/node_modules/zone.js/dist/zone.js:355:24
Zone</Zone</Zone.prototype.runTask@http://localhost/node_modules/zone.js/dist/zone.js:256:29
drainMicroTaskQueue@http://localhost/node_modules/zone.js/dist/zone.js:474:26
ZoneTask/this.invoke@http://localhost/node_modules/zone.js/dist/zone.js:426:22
zone.js:463:10

我应该改成 UTF-8 还是什么？

Answer 1

错误堆栈跟踪清楚地表明它的模板解析错误，您错过了关闭 ul 标记的位置。

你必须关闭 ul 元素，因为 Angular 2 在 html 文件中有模板时检查严格的 HTML 解析。

template/comments.html

<ul class="comments">
   <li *ngFor="let comment of Comments_array">
     <h3>{{comment.text}}</h3>
     <span>{{comment.author}}</span>
   </li>
</ul>