angular7学习笔记
安装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"
注意:同一个元素只能有一个*指令
服务类组件
用于封装可复用的业务逻辑代码
一般命名为 xxx.service.ts
创建服务:
import { Injectable } from '@angular/core';
@Injectable()
export class HelloService {
printHello(): void {
console.log('hello');
}
}
在app.module.ts中注册一个provider:
//引入HelloService
import {HelloService} from './hello.service';
//在构造函数中进行依赖注入 @NgModule({ ... providers: [HelloService], ... })
在需要用到的页面引入该服务:
import {HelloService} from './hello.service';
//在构造函数中进行依赖注入
constructor(private helloService: HelloService) {...}
//调用服务组件的方法
this.helloService.printHello();
- 服务都是单例的,一旦创建就会被缓存起来 重复使用
- 服务一旦实例化,将在整个应用的生命周期中存在,可以用来共享数据(下面axios部分有实例)
- 在需要使用服务的地方,利用依赖注入机制注入服务
- 依赖注入时自定义的服务需要写在内置的服务后面
父组件 向 子组件 传数据
<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)" >
import {ElementRef, ViewChild, ContentChild} from 'angular/core';
//通过 @ViewChild 引用 当前组件模板中的#名称的dom元素
@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就是调用这个指令的元素,前面应该加上private,否则在类中其它方法中引用this.el时会报错
调用时就是在元素中用上面的指令名做为属性名, 不需要加[]或*,
使用之前还要在ngModule的declarations中声明(官方文档里居然没有写这部分)
@ngModule({
declarations: {
指令类名
}
})
我用ionic g d 指令名 这个命令生成的指令, 它自动生成了"directives"文件夹,其下生成了 directives.module.ts 和 "指令名/指令名.directive.ts", directives.module.ts 内容如下:
import { NgModule } from '@angular/core';
import { HightLightDirective } from './hight-light/hight-light';
@NgModule({
declarations: [HightLightDirective],
imports: [],
exports: [HightLightDirective]
})
export class DirectivesModule {}
同时,如果使用 directives.module.ts , 那么,在app.module.ts中也可以这样引用并声明指令:
import { DirectivesModule } from '../directives/directives.module';
@NgModule({
...
//导入 模块
imports: [
DirectivesModule,
...
],
...
})
用命令行工具创建指令
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()
路由
1.在app-routing.module.ts中引用路由模块
(*以下代码,在使用ng new 创建项目时如果选择了使用路由,那么将会自动创建)
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
2.引入组件
在根模块中引入和声明组件, (如果是通过命令创建的组件,则工具会自动完成这步)
在app-routing.module.ts中引入组件
import { MyComponent } from "path/to/MyComponent";
3.定义路由规则
const routes: Routes = [ {path: 'path1', component: MyComponent1}, {path: 'path2', component: MyComponent2}, .... ];
path如果以/开头就是绝对路径,指向网站根路径,即http://domain/, 否则就是相对路径,相对于当前 定义路由的模块的路径.
比如在 app-routing.module.ts 中定义了一条path: news, 访问时就是 http://domain/news
*在浏览器中访问时路径区分大小写
在根组件模板中添加"路由出口",即在HTML中路由动态加载组件的地方
<router-outlet></router-outlet>
默认路由
{path: '**', component: HomeComponent}
或
{path: '**', redirectTo: 'home'}
'**'表示匹配任意路径,(实测发现 '' 也可以)
注意,这个默认路由规则 必须 写在后面,如果写在前面,那其它规则就都失效了
创建跳转链接, 在一个标签中使用
[routerLink]="[ '/news' ]"
路径如果是相对路径,则是相对当前的url,
当前激活路由,给他一个类用来指定激活路由的样式
routerLinkActive="active"
路由传参
get方式
//在html中跳转连接上加上 [queryParams]="{id:123}" //跳转的目标组件引入 import { ActivatedRoute } from '@angular/router'; //目标组件声明
constructor(public route: ActivatedRoute) {}
//接收参数
this.route.queryParams.subscribe((data)=>{
console.log(data); // {id: 123}
})
动态路由
//定义路由规则 , 只要在path的值中加入:参数名就可以了 {path: 'home/:id', component: HomeComponent} //定义连接 [routerLink]="['/path/', id]" //目标组件中仍然要引入ActivatedRoute import {ActivatedRoute} from '@angular/router'; //在构造函数中声明 constructor(public route: ActivatedRoute) {} //接收参数,与get传参唯一不同的是.params this.route.params.subscribe((data) => { console.log(data); //{id: xxx} });
//官方文档中是这样写的: (paramMap和params有什么区别?)
this.route.paramMap.subscribe(params => {
this.product = products[+params.get('productId')];
});
编程方式路由跳转
在JS代码中用路由的API进行跳转, 上面的跳转都是通过html中添加[routerLink]属性
编程路由跳转也分为GET传值和 动态路由 两种方式
编程式动态路由跳转:
//同样需要在路由规则中配置动态路由规则 {path: 'home/:id', component: HomeComponent} //在要调用路由跳转API的组件中引入路由模块 import {Router} from '@angular/router'; //在构造函数上声明 contructor(public router: Router) {} //调用, navigate的第一个参数是一个数组 this.router.navigate(['/path', param]); //接收 this.route.params.subscribe((data) => { console.log('在news页中接收到',data); // {id: 123} })
编程式GET传参路由跳转
//引入 import { Router, NavigationExtras } from '@angular/router'; //定义路由参数 let navigationExtras: NavigationExtras = { queryParams: {id: 123}, fragment: 'anchor' } this.router.navigate(['/path'], navigationExtras); //接收 this.route.queryParams.subscribe((data) => { console.log('在news页中接收到',data); // {id: 123} });
父子路由/嵌套路由
//在路由规则中定义子中由 const routes: Routes = [ { path: '...',component: ..., children: [ {path: ..., component: ...}, ... ] }, ]
//跳转 <a [routerLink]="['/path/to']" ></a> //或 <a [routerLink]="['to']" ></a>
//在父组件中加入 组件模板出口 <router-outlet></router-outlet>
HTTP数据请求
GET请求
1.在app.module.ts引入HttpClientModule .
import {HttpClientModule} from '@aunglar/common/http';
imports: [..., HttpClientModule, ...]
2.在用到的地方引入
import {HttpClient} from '@angular/common/http';
并在构造函数声明
constructor(public http: HttpClient) {}
3.使用get请求数据
this.http.get(url).subscribe((response)=>{});
POST请求
1.在app.module.ts引入HttpClientModule .与上面一样(略)
2.在用到的地方引入
import {HttpClient, HttpHeaders} from '@angular/common/http';
3.定义http请求选项
const httpOptions = { headers: new HttpHeaders({'Content-Type', 'application/json'}); };
4.调用post请求
this.http.post(url, {...}, httpOptions).subscribe((response)=>{});
JSONP请求
1.在app.module.ts引入HttpClientModule 和 HttpClientJsonpModule
import { HttpClientModule, HttpClientJsonpModule } from '@aunglar/common/http';
imports: [..., HttpClientModule, HttpClientJsonpModule, ...]
2.在用到的地方引用HttpClientModule,(同get请求,略)
并在构造函数声明
3.使用get请求数据
this.http.jsonp(url, 'callback').subscribe((response)=>{});
注: 第二个参数根据实际服务器的情况设置,可以通过在浏览器地址栏直接访问接口地址,观察返回结果,如果开头是callback就写callback,是什么第二个参数就写什么
另:http也提供了put,delete 方法
使用axios请求数据
安装
npm i axios -S
可以新建一个服务, 如果不用服务封装,也可以直接在使用的组件中直接引入axios并使用
ng g service service/http
在其中引入
import axios from 'axios';
调用
axiosGet(url) {
return new Promise((resolve, reject)=>{
axios.get(url).then((response)=>{ resolve(response); });
});
}
在app.module.ts中引入服务
import httpService from './service/httpservice.service';
并在providers中声明
providers: [..., httpService, ...]
在使用服务的文件中也要引入服务 (略)
在构造函数的参数中声明服务对象
constructor(...,public httpService: HttpService) {}
调用
this.httpService.axiosGet(url).then(...)
