首页 > 代码库 > angular 4--指令笔记

angular 4--指令笔记

2024-09-27 08:44:39   211人阅读

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‘ ],})

 

angular 4--指令笔记


联系
我们