难度

中级

学习时间

一小时

学前准备

有一定编程经验。

开发语言

Typescript

开发环境Node.js v10.9.0npm v6.2.0WebStorm v2018.2.3Angular CLI v6.1.51.内联 (inline) 模板还是模板文件？

接着上一章，我们先来看AppComponent组件类中的内容：

之前说过，@Component 装饰器中的 templateUrl 属性指定了组件模版文件地址；同时也可以用template属性来指定内联模版。下面就依次讲解这两种方式。

在讲解之前，看看官方是如何看待“内联 (inline) 模板还是模板文件？”这个问题的：

你可以在两种地方存放组件模板。 你可以使用 template 属性把它定义为内联的，或者把模板定义在一个独立的 HTML 文件中， 再通过 @Component 装饰器中的 templateUrl 属性， 在组件元数据中把它链接到组件。

到底选择内联 HTML 还是独立 HTML 取决于个人喜好、具体状况和组织级策略。 上面的应用选择内联 HTML ，是因为模板很小，而且没有额外的 HTML 文件显得这个演示简单些。

无论用哪种风格，模板数据绑定在访问组件属性方面都是完全一样的。

这里呢，个人给出一个答案：实际开发中使用模版文件。

2.模版文件templateUrl

模版就是HTML，所以模版文件那就是HTML文件啦。我们一起来找到这个模版文件，然后书写自己的内容。

下面看看组件元数据中的templateUrl属性：

templateUrl属性的值为“./app.component.html”，其中“.”表示当前目录，于是整体表示的是当前目录下的“app.component.html”文件，看文件类型就知道是HTML文件。那么当前目录是哪个目录呢？这个当前目录表示“app.component.ts”所在的目录，也就是app目录：

既然AppComponent组件的模版文件是“app.component.html”，那么打开“app.component.html”来看看：

我们上一章中牛刀小试的部分也保留了下来，现在来更改其中的内容，删除第一个<div>标签中的<img>标签：

删除第一个<div>标签后面的所有内容：

启动Angular应用：

看看你的界面是否和我的一样。

模版文件就是HTML文件，它里面的内容就是HTML。所以，大家只要会写HTML，那么就会写组件模版。组件模版也是组件的样子，组件模版长什么样，组件就长什么样。

接着来看看templateUrl属性官方说明：

属性名称：templateUrl

属性详情：组件模板文件的 URL。如果提供了它，就不要再用 template 来提供内联模板了。

属性类型：templateUrl: string

牛刀小试

来一个非常简单的示例，将“I like Angular”字体颜色变为红色。

参考示例：

“app.component.html”：

结果页面：

示例虽然很简单，但是就想告诉大家，书写模版文件没有那么难，就是普通的HTML。大家也可以试试其他你会的HTML元素。

3.内联模版template

内联就是写在和组件类同一个文件里面；模版和上面说过的一样，就是HTML；内联模版综合就是写在组件类文件中的HTML。

注意，我说的是组件类文件中，还没有说具体写在哪。

具体写在组件类上@Component 装饰器中的 template 属性中。

下面一步一步来书写一个内联模版。

打开“app.component.ts”组件类文件：

将@Component 装饰器中的 templateUrl 改为 template：

然后将template属性值“./app.component.html”删掉，写上两个“``”（反引号，反引号在键盘的ESC键下面，TAB键的上面，数字1键的左边。别忘了在英文输入法状态下进行输入）：

再看看浏览器中应用界面：

空的，什么都没有。因为我们没有在内联模版中写东西。

内联模版中写的也是HTML代码？

是的，和在模版文件中写的一样。

现在，在template属性值写上“<h1>Welcome</h1>”：

再看浏览器中界面的变化：

那么问题来了，内联模版中也能想模版文件中那样使用插值表达式吗？

答案是可以的。我们来试试，将template属性值更改为“<h1>Welcome to {{ title }}!</h1>”：

浏览器中的界面：

正确的将“Welcome to hello”显示出来了，这也说明在内联模版中使用插值表达式是完全没有问题的。

有人估计想问了，template属性值为什么要写在反引号中？引号不可以吗？

首先，反引号是字符串模版，写在“``” 反引号中的字符串内容将原生输出，不会对其中对内容进行转义。而引号则会对其中对内容进行转义，那样就达不到书写HTML代码的目的。

既然如此，我们将template属性值更改为和“app.component.html”模版文件一样的内容。

删除原有的template属性值内容，并在反引号中间回车，也就是换行：

然后，将“app.component.html”里面的内容复制粘贴到反引号中，当然了，你也可以照着写一遍：

再去看看浏览器中Angular应用界面：

和模版文件呈现出的内容一摸一样。

这就是内联模版，它将HTML书写在了组件类的元数据上。在实际开发中，我们通常不会采用内联模版的方式，因为它书写起来极不方便，也不美观，更没有阅读性，所以我们采用模版文件的方式，将组件类和组件模版关联起来。

接下来看看template属性官方说明：

属性名称：template

属性详情：组件的内联模板。如果提供了它，就不要再用 templateUrl 提供模板了。

属性类型：template: string

4.模板与视图

官方是如何描述模版与视图的呢？

你要通过组件的配套模板来定义其视图。模板就是一种 HTML，它会告诉 Angular 如何渲染该组件。

视图通常会分层次进行组织，让你能以 UI 分区或页面为单位进行修改、显示或隐藏。 与组件直接关联的模板会定义该组件的宿主视图。该组件还可以定义一个带层次结构的视图，它包含一些内嵌的视图作为其它组件的宿主。

带层次结构的视图可以包含同一模块（NgModule）中组件的视图，也可以（而且经常会）包含其它模块中定义的组件的视图。

以上就是官方对模版与视图的描述，上面最后的一张图我们可以简单说一下，从图中可以看到，顶层的是RootComponent和RootTemplate，也就是根组件和根组件的模版。

我们当前的根组件就是AppComponent。接着，在根组件的下面有Child A Component 和Child A Template，还有Child B Component 和Child B Template，虽然它只是列了两个子组件A和子组件B，其实还可以有无限的子组件。

从图中还可以看出，子组件A还有一个GrandChild Component 和GrandChild Template，也就是孙子组件和孙子组件的模版。

这张图它想表达的意思是什么？

它想表达的意思是，一个页面（即视图）可以是由很多个子视图组成的。

大家如果还是有点搞不懂，我们来看一个实际页面来说明，以百度举例说明。

上图是百度的官网，假设这是我们编写的AppComponent，其中哪些部分可以由多个子组件组合而成的呢？我标注出来给大家看：

其中，将网页分为三部分：页面顶部、页面内容区、页面底部。页面顶部放置网站导航，页面内容放置LOGO和搜索框，页面底部放置网站版权信息。

AppComponent对应的是整体页面，由导航组件、内容组件和底部组件组成。

页面顶部可以是NavComponent，导航组件。

页面内容可以是ContentComponent，内容组件。

页面底部可以是FooterComponent，底部组件。

这样是不是一下子把整体页面单独区分开来？一目了然有没有。

当你要编辑网页顶部导航时，只需去编辑NavComponent组件即可，其他的组件完全不用动，这几个组件之间完全互不干扰，独立存在。

为什么要分的这么细？

因为不想在后续的开发过程因一个小小的改动牵一发而动全身，那是灾难。另外一个原因就是组件复用，相同组件只需写一次，要用到的地方写上selector即可。

至此，组件的模版讲解就先告一段落啦，后续还有根组件模版息息相关的内容，敬请关注！

答疑

如果大家有问题或想了解更多前沿技术，请在下方留言或评论，我会为大家解答。

上一章

Angular第二十一章：组件

下一章

Angular第二十三章：组件的CSS样式

学习小组

加入同步学习小组，共同交流与进步。

方式一：通过关注我们的头条号，然后私信我们。方式二：通过公众号gorhaf，回复“Angular学习小组”。关注我们

如果你也热爱前沿技术，欢迎关注我们。

版权声明

原创不易，未经允许不得转载！