angular 学习

angular 中文官网

环境搭建

//全局安装
npm install -g @angular/cli   
//创建项目
ng new my-app
//启动项目
ng serve --open
//启动其他端口
ng serve --port  8888

快速创建

ng generate component 组件名 简写 ng g c 组件名
ng g directive 指令名称 会自动引入 ng g d 指令名称
ng g s path/名称 创建http服务文件
含有多个路由时：
ng generate component 组件名 --module=main (main为多个模块时指定某一个路由模块)
ng g m 模块名 新建模块
ng g m 模块名 --routing 新建模块并且增加模块路由

生命周期

官网生命周期
ngOnChanges()
ngOnInit()
ngDoCheck()
ngAfterContentInit()
ngAfterContentChecked()
ngAfterViewInit()
ngAfterViewChecked()
ngOnDestroy()
其中:ngOnInit()、ngAfterContentInit()、ngAfterViewInit()和ngOnDestroy()在一个组件的生命周期中只会被调用一次

模板语法的五个常用特性

循环*ngFor
if判断*ngIf
插值表达式{{}}
属性绑定[]
事件绑定 ()


   {{hero.name}}

{{test}}

下面绑定效果完全相同

 is the interpolated image.
 is the property bound image.

"{{title}}" is the interpolated title.
"" is the property bound title.

属性绑定bind-class \ bind-src 等价于[class] [src]

[ngClass]
[class]
class
bind-class

样式绑定

有些样式绑定中的样式带有单位
[ngStyle] 或者[style.color]








currentStyles: object = {
    color: 'red',
    fontSize: '30px'
};
ngStyle

循环*ngFor

index: number: The index of the current item in the iterable.
first: boolean：如果当前条目是可迭代对象中的第一个条目则为 true。
last: boolean：如果当前条目是可迭代对象中的最后一个条目则为 true。
even: boolean：如果当前条目在可迭代对象中的索引号为偶数则为 true。
odd: boolean：如果当前条目在可迭代对象中的索引号为奇数则为 true。
trackBy返回 NgFor应该追踪的值提高渲染性能

trackByList(id: number, list) {
    return list.id;
}

   {{hero.name}}



   
      {{i}} {{hero.name}}

双向绑定

[(ngModel)]
首先在app.module.ts中引入FormsModule

{{test1}}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule   //引入之后才能form表单操作
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
  test1 = '123'
}

NgSwitch 指令

类似于 JavaScript 的 switch 语句

模板引用变量 ( #var )

使用井号 (#) 来声明引用变量。 #phone 的意思就是声明一个名叫 phone 的变量来引用元素。

指令

ng g directive 指令名称 会自动引入

失去焦点后自动截取前五位值

import {Directive, ElementRef, HostListener} from '@angular/core';
@Directive({
  selector: '[appTest]'
})
export class TestDirective {
  constructor(public elementRef: ElementRef) {
  }
  @HostListener('blur', ['$event.target'])
  blurFn(evt) {
    if (evt.value) {
      if (evt.value.trim().length > 5) {
        this.elementRef.nativeElement.value = evt.value.substring(0, 5);
      }
    }
  }
}

模板表达式操作符

管道操作符 (|)
安全导航操作符 ( ?. ) 和空属性路径
非空断言操作符（!）

{{currentHero?.name}}
{{hero!.name}}