web 前端angular面试题集锦

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相比，有什么优势？

1. Angular 2是一个平台，不仅是一种语言
2. 更好的速度和性能
3. 更简单的依赖注入
4. 模块化，跨平台
5. 具备ES6和Typescript的好处。
6. 灵活的路由，具备延迟加载功能
7. 更容易学习
8. angular1是全局监听，变量越多性能越差，angular2采用模块化监听，提升了性能

   在Angular 2应用中，我们应该注意哪些安全威胁？

   就像任何其他客户端或Web应用程序一样，Angular 2应用程序也应该遵循一些基本准则来减轻安全风险。其中一些是：

• 避免为你的组件使用/注入动态HTML内容。
• 如果使用外部HTML，也就是来自数据库或应用程序之外的地方，那么就需要清理它。
• 不要将外部网址放在应用程序中，除非它是受信任的。避免网址重定向，除非它是可信的。
• 考虑使用AOT编译或离线编译。
• 通过限制api，选择使用已知或安全环境/浏览器的app来防止XSRF攻击、

Angular变化监测 ：

event：绑定event事件，数据变化视图更新

timeout，延迟触发