好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

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 中的函数即可。

查看更多关于angular 4--指令笔记的详细内容...

  阅读:35次