Question

我正在学习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>关闭时，另一个错误消息

Answer 1

将<link>更改为<li></li>并在其中添加选择器，并尝试更改选择器的名称，因为已存在名为link的html标记，将其更改为linker或其他任何内容。的 EXP：

<div> <ul> <li *ngFor="let foo of articles"> <linker [article]="foo" ></linker> </li> </ul> </div>

Answer 2

请正确关闭链接标记，然后才能正常工作，并在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>

Angular2不能正常工作

2 个答案: