Angular上路—基本概念—组件

组件控制视图中的一部分区域。在组件的类中定义属性和方法，经过属性和方法组成的API与视图进行交互。

export class HerosComponent implements OnInit {
   heores: Hero[];
  constructor(  // 构造器
  private heroService: HeroService,         //构造器参数型属性
  private messageService: MessageService
  ) { }
  ngOnInit(): void {
    this.getHeroes();
  }
}
复制代码

组件元数据

@Component 装饰器会指出紧随其后的那个类是个组件类，并为其指定元数据。 元数据告诉Angular如何获取它须要的主要构造块，以建立和展现这个组件及其视图。
元数据把模板和数据串联起来。组件和模板共同描述了一个视图

@Component({
  selector: 'app-heros',
  templateUrl: './heros.component.html',
  styleUrls: ['./heros.component.css'],
  providers: [HeroService]  // 当前组件所需的服务的数组
})
export class HerosComponent implements OnInit {
    ...
}
复制代码

模板与视图

经过组件的配套模板定义视图。模板是HTML，告诉Angular如何渲染组件。
视图一般会分层次进行组织，能以UI分区或页面为单位进行修改、显示或隐藏。
与组件直接关联的模板会定义该组件的宿主视图。
组件能够定义一个带层次结构的视图，包含一些内嵌的视图做为其余组件的宿主。
如何理解“定义一个带层次结构的视图”？？

带层次的视图能够包含同一个NgModule中的组件的视图，页能够包含其余模块中定义的组件的视图。

模板语法

<h2>Hero List</h2>

<p><i>Pick a hero from the list</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 循环语法
• {{hero.name}} 数据绑定
• (click) 事件绑定
• [hero] 属性绑定
• 子视图

数据绑定

Angular 支持双向数据绑定，它是一种对模板中的各个部件和组件中的各个部件进行协调的机制。往模板HTML中添加绑定标记能够告诉Angular该如何链接它们。
上面的数据绑定、事件绑定和子视图均属于数据绑定。还有一种就是双向数据绑定。双向数据绑定会把属性绑定和事件绑定组合成一种单独的写法。例如：<input [(ngModel)]="hero.name">
数据绑定在模板与组件之间的通信中扮演了很是重要的角色，在父子组件之间的通信业很是重要。

管道

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

• Angular自带了不少管道， date， uppercase, lowercase,currency等
• 管道操做符号： |

指令

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

• 组件从技术角度上说是一个指令 但因为组件对于Angular来讲很是独特、很是重要，所以Angular专门定义了一个@Component()装饰器，它扩展了@Directive()装饰器。

• 结构型指令 *ngFor、 *ngIf 等

• 属性型指令 [ngModel] 等