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.component的链接. html文件位于app文件夹中.

第4步 : 在浏览器中运行代码，您将获得以下输出.

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