javascript - Angular2无法正常工作

我正在学习Angular 2，并且已经编写了简单的应用程序，但是它无法正常运行。我不知道为什么
这是我的index.html：

<!DOCTYPE html>
<html lang="en">
    <head>
        <base href="/">
        <meta charset="UTF-8">
        <title>Angular 2Do</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <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/main').catch(function(err){ console.error(err); });
        </script>
    </head>

    <body>
        <list>Downloading</list>
    </body>
</html>

这是我的main.ts（我将整个代码写到一个文件中，以简化消息的结构）

import {NgModule} from "@angular/core";
import {Component} from "@angular/core";
import {BrowserModule} from "@angular/platform-browser";
import {platformBrowserDynamic} from "@angular/platform-browser-dynamic";

class Article{
    public title:string;
    public link:string;
    constructor(title:string, link:string){
        this.title = title;
        this.link = link;
    }
}

@Component({
    selector:"redirection",
    template:`
    <li><a href="{{article.link}}">{{article.title}}</a></li>
    `,
    inputs:['article']
})
class Redirection{
    public article:Article;
}

@Component({
    selector:"list",
    template:`
    <div>
        <div>
            <ul>
            <redirection
            *ngFor="let foo of articles"
            ["article"]="foo"
            ></redirection>
            </ul>
        </div>
        <form>
        <input name="link" type="text" #newlink>
        <input name="title" type="text" #newtitle>
        <button (click)="addLink(newtitle, newlink)">Submit</button>
        </form>
    </div>
    `,
})
class List{
    public articles:Article[];
    addLink(title:HTMLInputElement, link:HTMLInputElement):boolean{
        this.articles.push(new Article(title.value, link.value));
        return false;
    }
}

@NgModule({
    declarations:[Redirection, List],
    imports:[BrowserModule],
    bootstrap:[List]
})
class Main{

}
platformBrowserDynamic().bootstrapModule(Main);

和tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "typeRoots": [
      "./node_modules/@types/"
    ]
  },
  "compileOnSave": true,
  "exclude": [
    "node_modules/*",
    "**/*-aot.ts"
  ]
}

这就是我所拥有的。

如果我按<redirection>关闭</redirection>，则将出现解析错误：

还有另一个错误消息，当<redirection>关闭时

最佳答案

请正确关闭链接标签，然后它才能正常工作，并且ul之后缺少li标签。

<div>
    <ul>
       <li>
            //your other tag and logic here
       </li>
    </ul>
</div>
<form>
    <input name="link" type="text" #newlink>
    <input name="title" type="text" #newtitle>
    <button (click)="addLink(newtitle, newlink)">Submit</button>
</form>