angular知识点概要
<app-cars #tom [title]='title' [run]='run' [allparent]='this'>app-cars>
<div *ngFor='let item of list;let key=index' [hidden]='key==2'><p *ngIf='key==1'>{{item.name}}p>
div>
<app-cars (ourers)="xixhafio($event)">app-cars>
ngOnChanges()----父组件给子组件传值完成,有父子组件传值时才触发
ngOnInint()----数据和元素指令初始化完成,一般可以用于发送请求 ****
ngDoCheck----做自定义操作
ngAfterContentInint----内容投影到组件之后
ngAfterContentChecked----跟第三个差不多可以在内容投影到组件之后做自定义操作
ngAfterViewInit----视图加载完成,在这里可以获取到组件的dom元素 ****
ngAfterViewChecked------ 视图加载完成之后做自定义操作
ngOnDestroy----组件销毁后做一些操作 *****
import FormsModule from '@angular/forms'
创建 ng g service serves/servemy
引入 在app.module.ts中引入,注入
然后在需要使用服务的地方 申明constructor(public serve:xxxxx)
import {Observable} from 'rxjs
let stream =new Observable(observer =>{setTimeout(()=>{observer.next('glajhglsa')},2000)
})
stream.subscribe(value=> console.log(value))
let promi =new Promise(resolve =>{setTimeout(()=>{resolve('glajhglsa')},2000)
})
promi.then(value=> console.log(value))rxjs相比与promise有更强大的功能:
1.中途可以撤回---------let d=stream.subscribe(value=> console.log(value))d.unsubscribe();//取消订阅
2.可以发射多个值
3.提供了多种工具函数
//filter方法
stream.pipe(filter((value)=>{if(value%2==0){return true}})
).subscribe(value=> console.log(value))
//map方法
stream.pipe(map((value)=>{return value*3})
).subscribe(value=> console.log(value))
//多种工具一起使用
stream.pipe(filter((value)=>{if(value%2==0){return true}}),map((value)=>{return value*3})
).subscribe(value=> console.log(value))
4.可以多次执行,拿到多次结果,promise即使设置了定时器也只会拿到一次结果
let stream =new Observable(observer =>{setInterval(()=>{observer.next('glajhglsa')},2000)
})
1.在app.module.ts中引入
import {HttpClientModule} from '@angular/common/http'
2.依赖注入
3.在要使用的地方引入
import {HttpClient} from '@angular/common/http'
4.然后在需要使用服务的地方 申明constructor(public http:HttpClient)
5.使用
this.http.get(api).subscribe((res)=>{console.log(res)
})
const routes: Routes = [{path: 'home', component: HomeComponent}},//动态路由{path: 'new:id', component: NewComponent}}//任意路由{path: '**',redirectTo: '/home'}
]
//路由跳转
<a [routerLink]="[ '/home' ]" routerLinkActive="actice">跳转a>
.active{color: red
}//第一种路由传参方式
<a [routerLink]="[ '/home' ]" [queryParams]="{aid:key}" routerLinkActive="actice">跳转a>
获取：
1.import {ActivatedRoute} from '@angular/router';
2.constructor(public routeL:ActivatedRoute)
3.this.route.queryParams.subscribe((data)=>{console.log(data)
}) //路由拿到的也是rxjs格式的//第二种路由传参方式
<a [routerLink]="[ '/home'，key ]" routerLinkActive="actice">跳转a>
获取：
1.import {ActivatedRoute} from '@angular/router';
2.constructor(public routeL:ActivatedRoute)
3.this.route.params.subscribe((data)=>{console.log(data)
}) //路由拿到的也是rxjs格式的//js跳转 适合普通路由和动态路由
1.import {Router} from '@angular/router';
2.constructor(public router:Router)
3.this.router.navigate(['/new',2343])//js跳转 传值路由
1.import {Router,NavigationExtras} from '@angular/router';
2.let navigationExtras: NavigationExtras = {queryParams: {'id':'23'}fragment: 'anchor'
}
this.router.navigate(['/news'], navigationExtras);
{path: 'home', component: HomeComponent,children: [{path: 'name', component: NameComponent,},{path: '**',redirectTo:'/home'}]}
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！
