Angular 2 模板

在有关组件的章节中，我们已经看到了以下模板的示例。

template: '
    <div>
        <h1>{{appTitle}}</h1>
        <div>To Newbie Go</div>
    </div>
'

这被称为 内联模板 .还有其他定义模板的方法，可以通过 templateURL 命令完成。在组件中使用它的最简单方法如下。

语法

templateURL:
viewname.component.html

参数

• viewname ：这是app组件模块的名称。

在视图名之后，需要将组件添加到文件名中。

以下是定义内联模板的步骤。

步骤 1 ：创建一个名为app.component.html的文件。这将包含视图的 html 代码。

步骤 2 ： 在上面创建的文件中添加如下代码。

<div>{{appTitle}} Newbiego </div>

这定义了一个简单的 div 标记并引用 app.component 类中的 appTitle 属性。

步骤 3 ：在app.component.ts文件中，添加如下代码。

import { Component } from '@angular/core';

@Component ({
    selector: 'my-app',
    templateUrl: 'app/app.component.html'
})

export class AppComponent {
    appTitle: string = 'Welcome';
}

从上面的代码中，唯一可以注意到的变化来自于 templateURL，它提供了 app.component.html 文件的链接，该文件位于 app 文件夹中。

步骤 4 ： 在浏览器中运行代码，会得到如下输出。

从输出中可以看出，模板文件 (app.component.html) 文件正在被相应地调用。