zoukankan      html  css  js  c++  java
  • 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 中的函数即可。

  • 相关阅读:
    web.py的input获取问题
    python unicode和 utf8字符串比较
    python default encoding
    linux flash player的问题
    centos 支持 ntfs格式
    学习jqueryjquery中的show()和hide()
    字符串等长分割
    类加载器分类
    类加载器子系统
    70道HR的面试题
  • 原文地址:https://www.cnblogs.com/mabylove/p/6916916.html
Copyright © 2011-2022 走看看