《Angular学习三》组件

创建一个组件

Angular CLI 是用来创建组件的最简途径。你也可以手动创建一个组件。

使用 Angular CLI 创建组件

使用 Angular CLI 创建一个组件：

1. 在终端窗口中，导航到要放置你应用的目录。
2. 运行 ng generate component <component-name> 命令，其中 <component-name> 是新组件的名字。

默认情况下，该命令会创建以下内容：

• 一个以该组件命名的文件夹
• 一个组件文件 <component-name>.component.ts
• 一个模板文件 <component-name>.component.html
• 一个 CSS 文件， <component-name>.component.css
• 测试文件 <component-name>.component.spec.ts

其中 <component-name> 是组件的名称。

组件控制屏幕上被称为视图的一小片区域。

你在类中定义组件的应用逻辑，为视图提供支持。 组件通过一些由属性和方法组成的 API 与视图交互。

export class HeroListComponent implements OnInit {
  heroes: Hero[] = [];
  selectedHero: Hero | undefined;

  constructor(private service: HeroService) { }

  ngOnInit() {
    this.heroes = this.service.getHeroes();
  }

  selectHero(hero: Hero) { this.selectedHero = hero; }
}

当用户在应用中穿行时，Angular 就会创建、更新、销毁一些组件。 你的应用可以通过一些可选的生命周期钩子（比如 ngOnInit()）来在每个特定的时机采取行动。

interface OnInit {
  ngOnInit(): void
}

@Component 装饰器会指出紧随其后的那个类是个组件类，并为其指定元数据。 在下面的范例代码中，你可以看到 HeroListComponent 只是一个普通类，完全没有 Angular 特有的标记或语法。 直到给它加上了 @Component 装饰器，它才变成了组件。

@Component({
  selector:    'app-hero-list',
  templateUrl: './hero-list.component.html',
  providers:  [ HeroService ]
})
export class HeroListComponent implements OnInit {
/* . . . */
}

• selector：是一个 CSS 选择器，它会告诉 Angular，一旦在模板 HTML 中找到了这个选择器对应的标签，就创建并插入该组件的一个实例。 比如，如果应用的 HTML 中包含 <app-hero-list></app-hero-list>，Angular 就会在这些标签中插入一个 HeroListComponent 实例的视图。
• templateUrl：该组件的 HTML 模板文件相对于这个组件文件的地址。 另外，你还可以用 template 属性的值来提供内联的 HTML 模板。 这个模板定义了该组件的宿主视图。
• providers：当前组件所需的服务提供者的一个数组。在这个例子中，它告诉 Angular 该如何提供一个 HeroService 实例，以获取要显示的英雄列表。

模板与视图

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

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

模板语法

模板很像标准的 HTML，但是它还包含 Angular 的模板语法，这些模板语法可以根据你的应用逻辑、应用状态和 DOM 数据来修改这些 HTML。 你的模板可以使用数据绑定来协调应用和 DOM 中的数据，使用管道在显示出来之前对其进行转换，使用指令来把程序逻辑应用到要显示的内容上。

<h2>Hero List</h2>

<p><i>Select a hero from the list to see details.</i></p>
<ul>
  <li *ngFor="let hero of heroes" (click)="selectHero(hero)">
    {{hero.name}}
  </li>
</ul>

<app-hero-detail *ngIf="selectedHero" [hero]="selectedHero"></app-hero-detail>

• *ngFor 指令告诉 Angular 在一个列表上进行迭代。
• {{hero.name}}、(click) 和 [hero] 把程序数据绑定到及绑定回 DOM，以响应用户的输入。更多内容参阅稍后的数据绑定部分。
• 模板中的 <app-hero-detail> 标签是一个代表新组件 HeroDetailComponent 的元素。 HeroDetailComponent（代码略）定义了 HeroListComponent 的英雄详情子视图。 注意观察像这样的自定义组件是如何与原生 HTML 元素无缝的混合在一起的。

理解， *ngFor=”let hero of heroes” 类似 for 循环 foreach(hero in heroes),let 为变量作用域，(click)=”selectHero(hero)”类似 onclick = “ selectHero(hero) ” ，{{hero.name}} 为输出值，解析下来是

foreach(hero in heroes){
 onclick=selecthero(hreo);
}

数据绑定

如果没有框架，你就要自己负责把数据值推送到 HTML 控件中，并把来自用户的响应转换成动作和对值的更新。 手动写这种数据推拉逻辑会很枯燥、容易出错，难以阅读 —— 有前端 JavaScript 开发经验的程序员一定深有体会。

Angular 支持双向数据绑定，这是一种对模板中的各个部件与组件中的各个部件进行协调的机制。 往模板 HTML 中添加绑定标记可以告诉 Angular 该如何连接它们。

用例

<li>{{hero.name}}</li>
<app-hero-detail [hero]="selectedHero"></app-hero-detail>
<li (click)="selectHero(hero)"></li>
<input type="text" id="hero-name" [(ngModel)]="hero.name">

在双向绑定中，数据属性值通过属性绑定从组件流到输入框。用户的修改通过事件绑定流回组件，把属性值设置为最新的值。

管道

Angular 的管道可以让你在模板中声明显示值的转换逻辑。 带有 @Pipe 装饰器的类中会定义一个转换函数，用来把输入值转换成供视图显示用的输出值。

Angular 自带了很多管道，比如 date 管道和 currency 管道，完整的列表参阅 Pipes API 列表。你也可以自己定义一些新管道。

要在 HTML 模板中指定值的转换方式，请使用 管道操作符 (|)。

{{interpolated_value | pipe_name}}

<p>Today is {{'2020/01/30' | date}}</p>
<p>Today is {{'2020/01/30' | date:'fullDate'}}</p>
<p>The time is {{'2020/01/30' | date:'shortTime'}}</p>

结果

Today is Jan 30, 2020

Today is Thursday, January 30, 2020

The time is 12:00 AM

指令

Angular 的模板是动态的。当 Angular 渲染它们的时候，会根据指令给出的指示对 DOM 进行转换。 指令就是一个带有 @Directive() 装饰器的类。

组件从技术角度上说就是一个指令，但是由于组件对 Angular 应用来说非常独特、非常重要，因此 Angular 专门定义了 @Component() 装饰器，它使用一些面向模板的特性扩展了 @Directive() 装饰器。

结构型指令和属性型指令

结构型指令

通过添加、移除或替换 DOM 元素来修改布局。 这个范例模板使用了两个内置的结构型指令来为要渲染的视图添加程序逻辑：

<li *ngFor="let a of [1,2,3]">{{a}}</li>
<app-hero-detail *ngIf="selectedHero"></app-hero-detail>//暂时没弄明白

结果

1

2

3