学习Angular的模板和样式

Angular通过组件类实例和其面向用户的模板之间的交互来完成它的魔法。模板是Angular组件的一个重要部分，事实上，为了使组件工作，模板是绝对必要的。你不能省略模板文件或定义。在Angular中，组件充当控制器或视图模型，而模板代表视图本身。此外，Angular应用程序是用标准的CSS进行造型的。开发人员可以将他们所知道的关于CSS样式表、选择器、flexbox、css grid、box模型等的一切直接应用于Angular应用程序。在本教程中，我们将了解更多关于这方面的情况。

---

外部模板文件

当我们开始使用Angular时，我们已经看到了templateUrl属性是如何工作的。每个组件都必须有一个模板，才能在Angular中工作。在下面的virtual-machines.component.ts文件中，templateUrl属性被突出显示，表明virtual-machines.component.html文件是负责为这个组件提供模板的文件。

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

@Component({
  selector: 'app-virtual-machines',
  templateUrl: './virtual-machines.component.html',
  styleUrls: ['./virtual-machines.component.css']
})
export class VirtualMachinesComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

---

内联Angular模板

默认情况下，一个组件的模板文件会引用一个外部文件。除了这种方法之外，开发者还可以利用内联模板。这意味着，你可以在Typescript文件中直接嵌入html标记，而不是指向外部的html文件。有两种方法可以做到这一点。

---

单行方式

现在，外部的virtual-machines.component.html文件有这个标记。

<app-virtual-machine></app-virtual-machine>
<hr>
<app-virtual-machine></app-virtual-machine>

我们可以把它嵌入到virtual-machines.component.ts文件中，而不是把这个标记放在这里，完全不使用virtual-machines.component.html。下面是我们如何更新virtual-machines.component.ts以反映这一点。注意，templateUrl已经改成了模板。

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

@Component({
  selector: 'app-virtual-machines',
  template: '<app-virtual-machine></app-virtual-machine><hr><app-virtual-machine></app-virtual-machine>',
  styleUrls: ['./virtual-machines.component.css']
})
export class VirtualMachinesComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

在 **ng serve**运行后，在浏览器中访问Angular应用程序，会发现我们仍然有两个的实例，就像以前一样。所以我们可以看到这种方法确实有效。

---

使用Backtics的多线

如果你有相当数量的模板标记，把它全部放在一行可能会很麻烦。一个更好的方法可能是使用backtics而不是单引号。这样你就可以用一种更友好的风格来放置标记。

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

@Component({
  selector: 'app-virtual-machines',

  template: `
  <app-virtual-machine></app-virtual-machine>
  <hr>
  <app-virtual-machine></app-virtual-machine>
  <hr>
  <app-virtual-machine></app-virtual-machine>`,

  styleUrls: ['./virtual-machines.component.css']
})
export class VirtualMachinesComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

请注意，我们甚至添加了另一个JavaScript模板表达式的实例，使多行的方法成为可能。

如果你只有少量的标记，利用angular模板的内联方式可能会很方便。另一方面，有一个外部文件可以很好地分离关注点，使Typescript和HTML保持在各自的领域。无论你采取哪种方法，你都需要至少有一个模板来拥有一个有效的angular组件。

---

如何为Angular组件设计样式

就像我们看到的模板和指向外部HTML文件的能力一样，你也可以为你想应用于组件的任何样式引用单个CSS文件。下面我们看到styleUrls属性引用了virtual-machines.component.csscss文件。

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

@Component({
  selector: 'app-virtual-machines',
  templateUrl: './virtual-machines.component.html',
  styleUrls: ['./virtual-machines.component.css']
})
export class VirtualMachinesComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

但首先，让我们改变app.component.html中的类分配。

<div class="jumbotron">
  <div class="alert alert-info">
    <app-virtual-machines></app-virtual-machines>
  </div>
</div>

这就是我们得到的结果。我们能够使用简单的类名，因为记得我们已经在项目中加入了Bootstrap。

---

组件样式表

现在，让我们假设你想对你的组件进行更精细的造型。你可以从应用Bootstrap类开始，就像我们已经做的那样，现在我们可以通过使用外部的virtual-machines.component.css文件进一步细化外观。

* {
    color: darkgreen;
}

现在我们看到的是Bootstrap类的样式和我们自己的颜色定义的组合。

---

关于styleUrls和样式的更多信息

你可能已经注意到，styleUrls属性实际上持有一个数组，而不像templateUrl属性是一个单一的字符串值。这意味着，如果你愿意，你可以引用一个以上的样式表。除此以外，你还可以像这样使用style属性。

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

@Component({
  selector: 'app-virtual-machines',
  templateUrl: './virtual-machines.component.html',
  // styleUrls: ['./virtual-machines.component.css'],
  styles: [
    `* {
      color: darkgray;
     }`
  ]
})
export class VirtualMachinesComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

有了这个补充，该组件现在显示的是深灰色而不是深绿色。为什么呢？这是因为内联样式现在处于优先地位。

就像模板方法一样，你可以选择使用样式属性的内联样式或使用styleUrls的外部样式。我对CSS样式的偏好是利用外部样式表的方法。如果你只有很少的CSS代码，那么内联的方法就可以很好地工作。