Question

我在第n次设置角度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 { bootstrap } from "angular2/platform/browser";
import { ROUTER_PROVIDERS } from "angular2/router";
import { AppComponent } from "./app.component";

bootstrap(AppComponent, [ROUTER_PROVIDERS]);

我的app.component

import { Component } from "angular2/core";

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

app.html只是<div>Hello World</div>

当我运行它时，app组件将整个html树嵌入其中。我无法弄清楚原因。

[！[在此处输入图像说明] [1]] [1]

更新

如果我从我的<base>和<meta>标记中移除了结束标记，似乎问题会自行解决，这些标记是因为角色向我投诉有关它们，并指定了完整路径app.html templateUrl。

从＆＃34; angular2 / core＆＃34;;

导入{Component}

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

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

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

Answer 1

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

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

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

1 个答案: