Angular 2 - 模板

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

template: '
   <div>
      <h1>{{appTitle}}</h1>
      <div>To Tutorials Point</div>
   </div>
'

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

语法

templateURL:
viewname.component.html

参数

• viewname − 这是应用程序组件模块的名称。

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

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

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

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

<div>{{appTitle}} Tutorialspoint </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 文件夹中的 app.component.html 文件的链接。

步骤 4 − 在浏览器中运行代码，您将得到以下输出。

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