angular基础面试题_java web面试题

2022-11-02 17:10:02 浏览数 (1)

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 中

路由跳转方式

代码语言：javascript复制
[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() 装饰器是一个函数，它接受一个元数据对象，该对象的属性用来描述这个模块。

代码语言：javascript复制
@NgModule({
    imports:      [ BrowserModule ],导入表） —— 那些导出了本模块中的组件模板所需的类的其它模块
    providers:    [ Logger ], 本模块向全局服务中贡献的那些服务的创建器。
    declarations: [ AppComponent ], 主要应用导入组件 那些属于本 NgModule 的组件、指令、管道。
    exports:      [ AppComponent ], 导出表 那些能在其它模块的组件模板中使用的可声明对象的子集。
    bootstrap: [ AppComponent ], //应用的主视图，称为根组件。 
})

在 Angular 中有三种类型的指令：

代码语言：javascript复制
组件 — 拥有模板的指令

结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令

属性型指令 — 改变元素、组件或其它指令的外观和行为的指令。

angular 生命周期的顺序

代码语言：javascript复制
ngOnChanges: Angular 设置或重新设置数据绑定的输入属性时响应。在 ngOnInit() 之前以及所绑定的一个或多个输入属性的值发生变化时都会调用
ngOnInit: 在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件。
ngDoCheck：检测，并在发生 Angular 无法或不愿意自己检测的变化时作出反应,在ngOnChnages之后
ngAfterContentInit：当 Angular 把外部内容投影进组件视图或指令所在的视图之后调用，在ngDoCheck之后
ngAfterContentChecked：每当 Angular 检查完被投影到组件或指令中的内容之后调用,在ngAfter...之后调用
ngAfterViewInit：当 Angular 初始化完组件视图及其子视图或包含该指令的视图之后调用。在ng..之后，只调用一次
ngAfterViewChecked：每当 Angular 做完组件视图和子视图或包含该指令的视图的变更检测之后调用, 
                    gAfterViewInit() 和每次 ngAfterContentChecked() 之后调用。
ngOnDestroy:当 Angular 每次销毁指令/组件之前调用并清扫.

父子组件传值

代码语言：javascript复制
子组件暴露一个 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，延迟触发

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/180721.html原文链接：https://javaforall.cn

angularjs 编程算法 html https

0 人点赞