Question

当我尝试在我的组件中设置templateUrl时，我遇到了一个奇怪的错误。

这有效：

@Component({
    selector: 'buildingInfo',
    template: `
        <html>stuff</html>
    `
})

但是当我这样做时（在html文件中使用相同的内容）：

@Component({
    selector: 'buildingInfo',
    templateUrl: 'stuff.component.html'
})

输出是这样的：

<span>M</span>
<span>M</span>
<fakediscoveryelement></fakediscoveryelement>
<span>M</span>
<fakediscoveryelement></fakediscoveryelement>
<span>M</span>
<span>M</span>
<span>M</span>
<span>M</span>
<span>M</span>
<span>M</span>
<span>M</span>
<span>M</span>

我不知道为什么会这样。当我尝试在几乎所有其他组件（但不是全部）上使用单独的html文件时，我得到相同的输出。

Answer 1

如果您希望Angular找到相对于Component的模板，例如你有一个像

这样的结构

应用程序/

应用程序/ app.component.ts

应用程序/ app.component.html

确保您设置组件的模块ID。这将导致系统加载程序相对于您当前的路径。否则，它将始终期望完整路径为URL。

SystemJS的示例：

declare var __moduleName: string;
@Component({
    moduleId: __moduleName,
    selector: 'foo-bar',
    templateUrl: 'app.component.html',
})

其他人的例子：

@Component({
        moduleId: module.id,
        selector: 'foo-bar',
        templateUrl: 'app.component.html',
    })

我花了一些时间才得到这个：）

Answer 2

您的模板中不能包含<html>标记。 <html>是HTML文件中的顶级代码，Angular应用程序只能在<body>上或内部使用，<body>不能包含<html>代码

无法在Angular2中设置templateUrl

2 个答案: