大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE稳定放心使用
angular用管道转换数据
Angular 为典型的数据转换提供了内置的管道，包括国际化的转换（i18n），它使用本地化信息来格式化数据。数据格式化常用的内置管道如下：
-
DatePipe：根据本地环境中的规则格式化日期值。DatePipe: Formats a date value according to locale rules. -
UpperCasePipe：把文本全部转换成大写。 -
LowerCasePipe：把文本全部转换成小写。LowerCasePipe: Transforms text to all lower case. -
CurrencyPipe：把数字转换成货币字符串，根据本地环境中的规则进行格式化。 -
DecimalPipe：把数字转换成带小数点的字符串，根据本地环境中的规则进行格式化。 -
PercentPipe：把数字转换成百分比字符串，根据本地环境中的规则进行格式化angualr
angular路由配置：
路由配置在 app.route.ts 中
路由跳转方式
[routerLink]="['/devicepay']" [queryParams]="{id:key}" //路由跳转传参
//获取值
this.route.queryParams.subscribe((res)=>{
console.log(res)
})
{ path: 'devicepay/:id',component:DevicepayComponent}, 动态传参
路由跳转 this.router.navigate(['/news'],navigationExtras);
app.module.ts包含的内容解析
NgModule 是一个带有 @NgModule() 装饰器的类。@NgModule() 装饰器是一个函数，它接受一个元数据对象，该对象的属性用来描述这个模块。
@NgModule({
imports: [ BrowserModule ],导入表） —— 那些导出了本模块中的组件模板所需的类的其它模块
providers: [ Logger ], 本模块向全局服务中贡献的那些服务的创建器。
declarations: [ AppComponent ], 主要应用导入组件 那些属于本 NgModule 的组件、指令、管道。
exports: [ AppComponent ], 导出表 那些能在其它模块的组件模板中使用的可声明对象的子集。
bootstrap: [ AppComponent ], //应用的主视图，称为根组件。
})在 Angular 中有三种类型的指令：
组件 — 拥有模板的指令
结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令
属性型指令 — 改变元素、组件或其它指令的外观和行为的指令。angular 生命周期的顺序
ngOnChanges: Angular 设置或重新设置数据绑定的输入属性时响应。在 ngOnInit() 之前以及所绑定的一个或多个输入属性的值发生变化时都会调用
ngOnInit: 在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件。
ngDoCheck：检测，并在发生 Angular 无法或不愿意自己检测的变化时作出反应,在ngOnChnages之后
ngAfterContentInit：当 Angular 把外部内容投影进组件视图或指令所在的视图之后调用，在ngDoCheck之后
ngAfterContentChecked：每当 Angular 检查完被投影到组件或指令中的内容之后调用,在ngAfter...之后调用
ngAfterViewInit：当 Angular 初始化完组件视图及其子视图或包含该指令的视图之后调用。在ng..之后，只调用一次
ngAfterViewChecked：每当 Angular 做完组件视图和子视图或包含该指令的视图的变更检测之后调用,
gAfterViewInit() 和每次 ngAfterContentChecked() 之后调用。
ngOnDestroy:当 Angular 每次销毁指令/组件之前调用并清扫.父子组件传值
子组件暴露一个 EventEmitter 属性，当事件发生时，子组件利用该属性 emits(向上弹射)事件。父组件绑定到这个事件属性，并在事件发生时作出回应。
输出给父组件 @Output EventEmitter somethingChanged.emit（value）也叫事件发射器 触发父组件值得改变
子组件接收值用的@input
组件样式 ViewEncapsulation.Native（仅限本组件） None （全局样式）Emulated （只进不出，全局样式能进来，组件样式出不去）
angular 数据双向绑定原理
原理：页面中每绑定一个数据或者事件时，就会向$watch队列中加入一条$watch,当浏览器接受到可以被angular context（当事件触发，调用$apply进入angular context）处理的事件时，就会触发digest循环，它会遍历每一个$watch检查其属性和值是否发生改变，如果改变则用新值覆盖旧值，直到所有$watch检查完。如果此次digest循环有更新，那么会再次触发digest循环，直到所有的$watch都没有更新为止。
使用Angular 2，和使用Angular 1相比，有什么优势？
- Angular 2是一个平台，不仅是一种语言
- 更好的速度和性能
- 更简单的依赖注入
- 模块化，跨平台
- 具备ES6和Typescript的好处。
- 灵活的路由，具备延迟加载功能
- 更容易学习
- angular1是全局监听，变量越多性能越差，angular2采用模块化监听，提升了性能
在Angular 2应用中，我们应该注意哪些安全威胁？
就像任何其他客户端或Web应用程序一样，Angular 2应用程序也应该遵循一些基本准则来减轻安全风险。其中一些是：
- 避免为你的组件使用/注入动态HTML内容。
- 如果使用外部HTML，也就是来自数据库或应用程序之外的地方，那么就需要清理它。
- 不要将外部网址放在应用程序中，除非它是受信任的。避免网址重定向，除非它是可信的。
- 考虑使用AOT编译或离线编译。
- 通过限制api，选择使用已知或安全环境/浏览器的app来防止XSRF攻击、
Angular变化监测 ：
event：绑定event事件，数据变化视图更新
timeout，延迟触发
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/180721.html原文链接：https://javaforall.net
