安装angular的命令行工具
npm i -g @angular/cli
安装完后执行以下命令创建新项目:
ng new 项目名
然后进入项目目录
cd 项目名
启动开发环境
ng server
快速创建组件(并自动在app.module.ts中导入)
ng g c 组件名
属性绑定
[属性名]="表达式"
如果不加[] 那""里面的就会被当前字符串
如[bgColor]="‘red‘"等同于 bgColor="red"
如果[bgColor]="red" 这样写, 那编译器会找不到red这个变量
class绑定
[ngClass]="{xxx: 表达式, ... }" 表达式为真则元素就有xxx这个class
style绑定, 注意css属性名是驼峰式
[ngStyle]="{backgroundColor: isRed ? ‘red‘ : ‘green‘}"
条件渲染
*ngIf="表达式"
*ngIf="表达式; else 元素引用名称"
<xxx #名称 >
<div [ngSwitch]="...">
<div *ngSwitchCase="...">
</div>
</div>
循环渲染
*ngFor="let item of list"
注意:同一个元素只能有一个*指令
父组件 向 子组件 传数据
<sub-component [propName]="value" >
绑定事件监听
<div (click)="myFunction($event)" >
在组件ts文件内定义myFunction方法,其可接收到$event事件对象
自定义事件
<sub-component (myEvent)="doSomething()">
在子组件中,引入EventEmitter,
import {EventEmitter} from "@angular/core";子组件先声明事件对象
@Output() myEvent = new EventEmitter<boolean>();子组件的某个方法里调用
this.myEvent.emit(agreed);
解决跨级组件通信
1 创建服务，new一个EventEmitter
import {Injectable, EventEmitter, OnInit} from "@angular/core";
@Injectable()
export class EmitService implements OnInit {
public eventEmit: any;
constructor() {
// 定义发射事件
this.eventEmit = new EventEmitter();
}
ngOnInit() {
}
}
2、配置module.ts
import {BrowserModule} from ‘@angular/platform-browser‘;
import {NgModule} from ‘@angular/core‘;
import {AppComponent} from ‘./app.component‘;
import {EmitComponent} from "./emit.component";
import {EmitService} from "./emit.service";
@NgModule({
declarations: [
AppComponent,
EmitComponent
],
imports: [
BrowserModule
],
providers: [
EmitService
],
bootstrap: [
AppComponent
]
})
export class AppModule {
}
3、定义组件，发射消息
import {Component} from ‘@angular/core‘;
import {EmitService} from "./emit.service"
@Component({
selector: ‘app-root‘,
templateUrl: ‘./app.component.html‘,
styleUrls: [‘./app.component.css‘]
})
export class AppComponent {
constructor(public emitService: EmitService) {
}
emitFun() {
// 如果组件中，修改了某些数据，需要刷新用用户列表，用户列表在其他组件中，那么就可以发射一个字符串过去，那边接收到这个字符串比对一下，刷新列表。
this.emitService.eventEmit.emit("userList");
}
}
4、定义接收组件，接收比对发射的字符串，判断，调取接口，刷新组件内容
import {Component, OnInit} from "@angular/core";
import {EmitService} from "./emit.service"
@Component({
selector: "event-emit",
templateUrl: "./emit.component.html"
})
export class EmitComonent implements OnInit {
constructor(public emitService: EmitService) {
}
ngOnInit() {
// 接收发射过来的数据
this.emitService.eventEmit.subscribe((value: any) => {
if(value == "userList") {
// 这里就可以调取接口，刷新userList列表数据
alert("收到了，我立马刷新列表");
}
});
}
}
总结：其实就是EventEmitter的两个方法，emit(),subscribe()发射和接收；
对象本地指向 ,(如果是input元素,其类型是HTMLInputElemet)
<div #oneElement >
<div (click)="func(oneElement)" >
通过 @ViewChild 引用 当前组件模板中的#名称的dom元素
import {ElementRef, ViewChild, ContentChild} from ‘angular/core‘;
@ViewChild(‘名称‘) 变量名: ElementRef
通过 @ContentChild 引用 父组件中子组件的子元素#名称的dom元素
@ContentChild(‘名称‘) 变量名: ElementRef
内容分发,类似Vue的slot
子组件利用<ng-content></ng-content> 引用 父组件中此组件标签的子元素.
生命周期
init之前会调constructor()
ngOnChanges(change: SimpleChanges) ;需要import {SimpleChanges } from ‘@angular/core‘;
ngOnInit
ngDoCheck
ngAfterContentInit
ngAfterContentChecked
ngAfterViewInit
ngAfterViewChecked
ngOnDestroy
class xxx implements OnInit, OnChanges
自定义指令
@Directive({ selector: ‘[指令名]‘ }) export class 类名 implements OnInit { constructor(private elementRef: ElementRef, renderer: Renderer2) { } ngOnInit() {
this.renderer.setStyle(this.elementRef.nativeElement, ‘background-color‘, ‘red‘);
} }
构造函数的参数elementRef就是调用这个指令的元素,调用时就是在元素中用上面的指令名做为属性名, 不需要加[]或*
使用之前还要在ngModule的declarations中声明
@ngModule({
declarations: {
指令类名
}
})
用命令行工具创建指令
ng g d 路径/my-name
指令文件名小写以-连接,生成文件名为my-name.directive.ts,
生成的指令类名为MyNameDirectvie, 选择器名为appMyName,
在指令类中,通过@hostlistener监听事件
import {HostListener} from ‘@angular/core‘;
@HostListener(‘mouseenter‘) dosomething(event: Event) {}
在指令类中,通过@HostBinding绑定属性,将指令内的变量绑定到引用元素上的属性值
import {HostBinding} from ‘@angular/core‘;
@HostBinding(‘style.backgroundColor‘) bgc:strind = ‘red‘;
还可以通过引用元素的属性向指令传递参数,方法与经组件传参数一样,用@input()
原文：https://www.cnblogs.com/johnjackson/p/11027212.html