angular 4--指令笔记
1. Angular 模块引导
Angular没有了类似AngularJS中的<body ng-app="my-app">这样的引导指令了
通过显示调用 bootstrap 函数，并传入应用模块的名字( AppComponent)来启动应用。
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule ],
providers: [ Logger ],
declarations: [ AppComponent ],
exports: [ AppComponent ],
bootstrap: [ AppComponent ]}) export class AppModule { }
NgModule是一个装饰器函数，它接收一个用来描述模块属性的元数据对象。其中最重要的属性是：
-
declarations- 声明本模块中拥有的视图类。Angular 有三种视图类：组件、指令和管道。 -
exports- declarations 的子集，可用于其它模块的组件模板。 -
imports- 将js引入的素材模块或者组件模块等，进行angular模块化引用。 -
providers- 服务的创建者，并加入到全局服务列表中，可用于应用任何部分。 -
bootstrap- 指定应用的主视图（称为根组件），它是所有其它视图的宿主。只有根模块才能设置bootstrap属性。
2.ngClass 表达式包含/排除css类
<div [ngClass]="{active: isActive}"> // 例子1
<div [ngClass]="{active: isActive,
shazam: isImportant}"> // 例子2
<div [class.active]="isActive"> // 例子3
在第一个例子中，如果isActive为真，则active类被应用到那个元素上。
还可以同时指定多个类，例如第二个例子。
Angular还有类绑定，它是单独添加或移除一个类的好办法，就像第三个例子中展示的。
3.click 事件
<button (click)="toggleImage()"> // 例子1
<button (click)="toggleImage($event)"> // 例子2
Angular中要使用事件绑定，把目标事件的名字放在圆括号中，并且使用等号右侧引号中的模板语句对它赋值。 然后Angular为这个目标时间设置事件处理器。当事件被触发时，这个处理器就会执行模板语句。
在第一个例子中，当用户点击此按钮时，相关组件中的toggleImage()方法就被执行了。
第二个例子演示了如何传入$event对象，它为组件提供了此事件的详情。
4.Component装饰器
@Component({ selector: 'movie-list', templateUrl: './movie-list.component.html', styleUrls: [ './movie-list.component.css' ], })
5.生命周期钩子
生命周期钩子其实就是生命周期函数，一般用在当我们调用服务获取数据的时候去使用的，例如当service.ts中有一个获取后台数据的接口，需要我们在组件构建到页面后就去获取后台数据。
有了生命周期函数，我们可以控制数据在什么时候去获取最合适。
1 import { Directive, OnInit, OnDestroy } from '@angular/core'; 2 3 import { LoggerService } from './logger.service'; 4 5 let nextId = 1; 6 7 @Directive({selector: '[mySpy]'}) 8 export class SpyDirective implements OnInit, OnDestroy { 9 10 constructor(private logger: LoggerService) { } 11 12 ngOnInit() { this.logIt(`onInit`); } 13 14 ngOnDestroy() { this.logIt(`onDestroy`); } 15 16 private logIt(msg: string) { 17 this.logger.log(`Spy #${nextId++} ${msg}`); 18 } 19 }
使用生命周期钩子的时候，需要注意的是:
1. export class SpyDirective implements OnInit, OnDestroy {...} // 需要的生命周期钩子直接引入 implements 到后面即可，多个用逗号隔开;
2. 在 ngOnInit、ngOnDestroy... 等方法中执行 service 中的函数即可。
