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‘ ],
})
时间： 2025-01-05 11:15:25