angular7.0用法

一 app.modlue.ts的各个参数
@NgModule declarations配置当前项目运行的组件
imports 配置当前模块运行依赖的其他模块
providers 配置项目所需的服务
bootstrap 根组件

二 创建组件
1 ng g component component/header
2 使用的时候直接 <app-header></app-header>
3 运行项目 ng serve --open

三 引入图片
1 本地图片<img src="assets/images/01.png">
2 网络图片public img='http://' <img [src]="img">

四 遍历
定义一个数组
public list:any[]=[]

<li *ngFor="let item of list;let i=index">   

五 条件判断
1.*ngIf

<li *ngIf="key==1" class="red">            

2 ngSwitch

<ul [ngSwitch]='score'>
   <li *ngSwitchCase="1">    情况项
   <li *ngSwitchDefault>   默认值

六 ngClass ngStyle 用法
1 [ngClass]="{‘red’:true,‘blue’:false}"
2 [ngStyle]="{‘color’:‘red’}" red 固定值 添加“” 后台传递过来的变量 不加“”

七 管道
1 uppercase/lowercase
2 获取时间 public datatime = new Date()

 {{datatime|date:"yyyy-MM-DD HH-mm ss"}}

注 ：如果绑定之后页面显示[Object,Object]  解决方法 使用：
{{info|json}}

八 事件

<button (click)="run($event)">    如果是input的话   可以获取到写入的值   e.target.value             e.target 获取dom对象
<input (keydown/keyup)="key($event)">

九 双向数据绑定
1 app.module.ts中 引入 import {FromModule} from '@angular/forms'
2 声明 imports:[FromModule]
3 使用 [(ngModel)]=“words”
或者使用js

<imput id="name">
let name = document.getElementById('name')
name.value   输入的值

10 Form表单类
radio
如果点击字的时 input 也能选中 <input id="sex1"><label for="sex1">id 与for 对应

select 双向绑定的话 <select [(ngModel)]="">

checkbox 双向绑定 以及 点击字时选 id与for 对应

<input [id]="'check'+key" [(ngModel)]="item.check"  (change)=""><label [for]="'check'+key">

angular7的一个标签上无法使用多个指令
也可通过[hidden] 来显示隐藏或*ngIf

十 service服务使用
storage 用法
1 创建服务 ng g service service/storage
2跟模块中引用并配置import {StorageService}from "../service/storage.service"
3 providers:[StorageService]
4 在哪使用在哪引用
5 初始化 A var storage=new StorageService() 不推荐使用
B constructor(public storage:StorageService){ this.storage.get() }
6 使用 this.storage.get()
storage服务

set(key:string,value:any){
   localstorage.setItem(key,JSON.stringify(value))
}
get(key){
   return JSON.parse(localstorage.getItem(key))
}
remove(key){
   localstorage.removeItem(key)
}

十一 操作DOM的方法
1 原生JS

let box:any = document.getElementById('box')
box.style.color='red' 
必须是视图加载完成之后      获取DOM            

2 ViewChild方法

1 起名字   #myBox
2 引入   import {ViewChild} from "@angluar/core"
3 写在类里面 @ViewChild('myBox') myBox1:any;     获取DOM节点赋值给任意类型的myBox1
4 this.myBox1.nativeElement   才是原生节点    
   this.myBox1.nativeElement.style.color="red"

ViewChild不仅可以获取DOM节点 也可以调用子组件
通过ViewChild调用子组件
1 在父组件中引入子组件 <app-header><app-header>
2 给子组件起名字 <app-header #headers><app-header>
3 @ViewChild(‘headers’) header:any; 在父组件中获取子组件实例 赋值给任意类型的header
4 调用子组件的方法 this.header.run()

十二 父组件给子组件传值 @Input
A 子组件获取父组件传递的数据
1 父组件定义数据
2 调用子组件时定义属性 <子组件 [title]=“title”>
3 子组件接收 引入Input装饰器 import {Input} from “@angluar/core”
4 @input() title:any; {{title}} 接受父组件传递的数据 要与子组件定义的属性一致
B在子组件执行父组件的方法
1 父组件定义方法
2 在子组件中定义函数 (click)=“geteDate()”
3 子组件中执行父组件的函数方法 @Input() run:any; this.run()
4 <子组件 [run]=“run”>
C 把父组件的数据全部传递给子组件
1<子组件 [home]=“this”> this表示当前实例
2 子组件中 @Input() home:any;
this.home.run()/msg等；

十三 在父组件中执行子组件的方法和数据 @ViewChild
1 在子组件中定义数据和方法
2 在父组件中获取子组件的数据和方法
<子组件 #footer>
import {ViewChild} from “@angular/core”
@ViewChild(‘footer’) footer:any;
this.footer.mes 数据 this.footer.run() 方法

十四 RXJS
Rxjs是异步数据流 来自微软 比promiss更强大
常见的异步编程方法
1 回调函数
2 事件监听/发布订阅
3 promiss
4 Rsjx
为了使用公共的IP 可以封装函数
1 通过promiss封装

run(api){
  retun new Promiss((resove,reject)=>{
    this.http.get(api).subscribe((responce)=>{
       resove(responce)
})
})
}
this.run(api).then(()=>{})

十五 请求
A get
1 引入 HttpClientModule
import {HttpClientModule} from “@angular/common/http”
imports:[HttpClientModule]
2 在请求的地方使用
import {HttpClient} from “@angular/common/http”
public http:HttpClient
this.http.get(api).subscribe((r:any)=>{
参数定义类型之后才能’.‘调用
})
B post
1 引入 HttpClientModule
import {HttpClientModule} from “@angular/common/http”
imports:[HttpClientModule]
2 在请求的地方使用
import {HttpClient,HttpHeaders} from “@angular/common/http”
public http:HttpClient
定义请求类型
const header = {headers:new HttpHeaders({“Content-Type”:‘application/json’})}
this.http.post(api,{‘username’:‘123’},headers).subscribe((r:any)=>{
参数定义类型之后才能’.‘调用
})
C jsonp 跨域的一种解决方案
1 引入 import {HttpClientModule,HttpClientJsonpModule} from “@angular/common/http”
2 import {HttpClient} from “@angular/common/http”
public http:HttpClient
this.http.jsonp(api,’‘callback’’).subscribe(）
this.http.jsonp(api,’‘cb’’).subscribe(）
3 jsonp请求 服务器必须支持jsonp 验证方式 ？callback=sss 或 ？cb=sss

十六 路由
1 创建项目的时候安装路由
2 具体路由
const routes:Routes=[
{path:‘home’,component:HomeComponent},
{path:’**’,redirectTo:‘home’} ** 表示任意路由 如果找不到直接跳转
]
3 <a [routerLink]="[’/home’]"> || < a routerLink=’/home’>
4 < a routerLink=’/home’ routerLinkActive=“active”> 选中状态
路由跳转传值
A get传值 api?aid=id
1 < a routerLink="[’/home’]" [queryParams]="{aid:id,key:1}">
2 获取get 传值 import {ActivatedRoute} from “@angular/router”
public route:ActivatedRoute
this.route.queryParams.subscribe({})
B 动态传值 api/id
1 配置路由
{path:‘news/:aid’,component:NewsContent}
2 跳转设置
< a routerLink="[’/home’,key]" routerLinkActive=“active”>
3 获取动态路由值
import {ActivatedRoute} from “@angular/router”
this.router.params.subscribe()
在js中实现页面跳转
A 动态页面跳转
1 配置路由
2 引入 import {Router} from “@angular/router”
public router:Router
3 跳转 this.router.navigate([’/路由’,‘1234’])
this.router.navigate([’/路由’])
B get 路由js跳转
1 引入 import {Router,NavigationExtras} from “@angular/router”
2 定义对象 let queryParams:NavigationExtras = {
queryParams:{aid:123}
}
this.router.navigate([’/news’],queryParams)

十七 配置子路由得方法
{path:‘home’,component:HomeComponent,Children:[
{path:‘homes’,component:HomesComponent]
]}
< a [routerLink]="[’/home/homes’]">
在父组件中显示子组件
< router-outlet >