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

template: '   
      
{{appTitle}}
      
To Tutorials Point
   
'

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

语法

templateURL:viewname.component.html

参数

• viewname : 这是应用程序组件模块的名称.

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

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

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

第2步 : 在上面创建的文件中添加以下代码.

{{appTitle}} Tutorialspoint 

这定义了一个简单的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)文件.