为什么Angular 2中的根组件嵌套html？_Angular

为什么Angular 2中的根组件嵌套html？

angular

为什么Angular 2中的根组件嵌套html？,angular,Angular,我在第n次设置angular 2时遇到了最大的困难。我每走一步，每一次尝试一个新项目来巩固知识时，都会遇到很多奇怪的问题我目前有以下依赖项 "dependencies": { "angular2": "2.0.0-beta.1", "systemjs": "0.19.17", "es6-promise": "^3.0.2", "es6-shim": "^0.33.3", "reflect-metadata": "0.1.2", "rxjs": "

我在第n次设置angular 2时遇到了最大的困难。我每走一步，每一次尝试一个新项目来巩固知识时，都会遇到很多奇怪的问题

我目前有以下依赖项

"dependencies": {
    "angular2": "2.0.0-beta.1",
    "systemjs": "0.19.17",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.10"
  },

我的index.html非常简单

<!DOCTYPE html>
<html>
<head>
    <base href="/" ></base>
    <meta charset="utf-8" ></meta>
    <title></title>

    <script src="lib/vendors.js"></script>
    <script>
        System.config({
            packages: {
                "app/": { defaultExtension: "js" }
            }
        });

        System.import("app/boot");
    </script>
</head>
<body>
    <app>Loading...</app>
</body>
</html>

我的应用程序组件

import { Component } from "angular2/core";

@Component({
    selector: "app",
    templateUrl: "app.html"
})
export class AppComponent { }

app.html只是一个

Hello World

当我运行这个程序时，应用程序组件将整个html树嵌套在自身中。我不明白为什么

[！[在此处输入图像描述][1][1]

更新：

如果我从我的

和

标记中删除结束标记，并且指定app.html templateUrl的完整路径，那么问题似乎可以自行解决。这些标记是由于angular向我投诉而添加的

从“angular2/core”导入{Component}

如果我尝试通过添加moduleId:module.id选项来使用相对url路径，它不会呈现任何内容。。。即使这适用于不是根组件的组件。如果有人对评论中的原因有所了解，我将不胜感激

@Component({
    selector: "app",
    moduleId: module.id,
    templateUrl: "app/app.html"
})

不应该有结束标记。我不知道这是否解决了您的问题，但Angular2在测试版中对无效HTML变得更加迂腐

键入

http://localhost:/app.html

在浏览器的地址栏中？您是得到Hello World div还是index.html？我得到index.html，因为我的服务器正在将所有无效请求重定向回index.html。app.html文件位于app/app.html中，如果我将templateUrl更改为“app/app.html”，它似乎可以工作。但是，如果我试图通过将moduleId:module.id添加到@Component来使用相对URL，它将不起作用。那就什么也装不下了。我没有答案，但你至少应该修改一下你的问题，把它弄清楚。好吧，这就是问题所在。我添加了这些结束标记，因为它向我抛出了错误，我发现这是阻止它的解决方案。如果我删除了它们，就会出现这样的错误。解决方案似乎是去掉关闭标记，就像你提到的（我只是因为以前的错误才添加了关闭标记），并设置我的app.html模板的绝对路径（templateUrl:“app/app.html”）。为什么我不能在根组件中使用moduleId:module.id的相对URL？实际上

允许使用结束标记，但不需要它。

标记不能有结束标记。看起来像只虫子。我想知道为什么Angular会解析头部。我不使用TS（仅Dart），也不知道如何使用TS的相对路径。@GünterZöchbauer您从哪里获得“允许结束标记”的信息？根据，是一个没有结束标记的空元素，就像。@MrLister问得好。我记得我查过了，但现在我找到的所有sai

base

都不能有结束标记。谢谢你指出这一点！

@Component({
    selector: "app",
    templateUrl: "app/app.html"
})
export class AppComponent { }

@Component({
    selector: "app",
    moduleId: module.id,
    templateUrl: "app/app.html"
})

<base href="/" ></base>
<meta charset="utf-8" ></meta>