Angular2+ 面试题集锦

1. 生命周期钩子

生命周期的顺序，见下图：

• ngOnChanges:当组件数据绑定的输入属性发生变化是触发，该方法接收一个SimpleChanges对象，包括当前值和上一个属性值。首次调用一定发生在ngOnInit前，值得注意的是该方法仅限于对象的引用发生变化时才会触发。
• ngOninit:初始化指令或组件，在angular第一次显示展示组件的绑定属性后调用，该方法只会调用一次
• ngDocheck:检测

                 ngAfterContentInit:当把内容投影进组件之后调用，第一次调用ngDocheck()之后调用，只调用一次，只适用于组件

                 ngAfterContentChecked:每次完成被投影组件内容的变更检测之后调用，只适用于组件

                 ngAfterViewInit:在angular初始化组件及其子组件的视图之后调用，只调用一次,只适用于组件

                 ngAfterViewChecked:每次做完组件视图和子视图的变更检测之后调用，只适用于组件

• ngOnDestroy:在angular每次销毁组件或指令之前调用，通常用于移除事件监听，退订可观察对象。

详细案例分析见：https://blog.csdn.net/it_rod/article/details/79433887

2. 指令分类

组件：用于构建UI组件，继承于Directive类

属性指令：用于改变组件的外观或行为

• ngClass
• ngStyle

结构指令：用于动态添加或删除DOM元素来改变DOM布局

• ngIf
• ngFor
• ngSwitch

自定义指令

3. 父子组件之间的数据传递

• @Input 父组件向子组件传递数据和传递方法(子组件中使用)
• @output 子组件传值给父组件  （事件传递的方式）（子组件中使用）

//子组件中使用事件发射器
@output()  somethingChanged = new EventEmitter();
somethingChanged.emit(value);

• 使用@ViewChid 父组件通过局部变量获取子组件的引用，主动获取子组件的数据和方法（父组件中使用）

4. 双向数据绑定的原理

• data => view：数据绑定，模板语法 [ ]
• view => data:   事件绑定，模板语法（）
• angular的双向数据绑定就是 数据绑定 + 事件绑定 ，模板语法 [()]

5. 组件和指令的区别

• component使用注解@Component修饰，directive使用注解@Directive修饰
• component是组件化思想，基于组件创建应用，把应用划分成细小的可重复利用的组件，而directive用来在已经存在的DOM元素上实现一些行为
• component是可重复使用的组件，directive是可重复使用的行为
• component可创建一个view，即template或templateUrl，而directive没有。

6. ng-content指令？

像p标签或者h1标签，在标记之间可以添加内容，eg:

this is a paragraph

.那我们如果想在angular的标签之间添加内容呢，例如在,这种情况下就可以使用tag directive is used

 7. router.navigate 的使用？

当我们想路由到一个组件的时候使用router.navigate

this.router.navigate(['./component name'])

 

8. 什么是ViewEncapsulation

ViewEncapsulation 决定组件中定义的样式是否会影响整个应用程序。在Angular中有三种方法可以做到这一点:
Emulated : 样式从其他HTML传播到组件。
Native : 来自其他HTML的样式不会传播到组件。
None:组件中定义的样式对所有组件都是可见的。

9.  RouterOutlet

简单理解：页面占位符,决定component显示在哪里，最终会被相应的component的view替换掉

 10. {{}}

与HTML标签一起使用，eg:

{{var}}

var 是来自于ts（component）中的值。

11.  有几种数据绑定方式？

• 属性绑定  [ ]
• 事件绑定（）
• 双向数据绑定 [()]

 12. 单页面应用和传统的web技术有什么不同？

在传统的web技术中，客户端请求一个web页面(HTML/JSP/asp)，服务器返回资源(或HTML页面)，客户端再次请求另一个页面，服务器用另一个资源响应。问题就在于请求/响应中消耗了大量时间，或者是重新加载使用了大量时间。而在SPA技术中，即使URL不断变化，我们也只维护一个页面(index.HTML)。

 13. Observables 和Promises的区别

• Observables 是惰性的，意思是在subsciption之前什么都不会发生。

        Promise是eager的，意思是一旦创建，就会执行

• Observable是一个stream，可以传递0,1，或者多个事件，并且为每个事件回调。

        Promise只处理一个事件

• Observable可取消

        Promise不可取消

 

 14. AsyncPipe ？

当observable或promise返回data时，我们使用一个临时属性来保存内容。稍后，我们将相同的内容绑定到模板。通过使用AsyncPipe, promise或observable可以直接在模板中使用，而不需要临时属性。

 15. Authentication and Authorization的区别？

• Authentication (认证) ： 用户登录凭据传递给(服务器上的)认证API。在服务器端验证凭据并返回JSON Web Token(JWT)。JWT是一个JSON对象，它有关于当前用户的一些信息或属性。一旦JWT返回给给客户端，客户端或用户将被该JWT所标记。
• Authorization（授权）：登录成功后，经过身份验证或真正的用户不能访问所有内容。用户未被授权访问其他人的数据，他/她被授权访问某些数据。

 16. AOT编译 和JIT编译？

• Just-In-Time (JIT) 生成的JS代码，在浏览器中进行。

       -- 大概的开发流程：

          - 使用Typescript开发

          - 使用tsc编译

          - 打包、压缩、部署

         部署好之后，用户在浏览器端：

          - 浏览器下载js代码

          - angular启动，在浏览器中开始JIT的编译过程

          - 渲染页面

• Ahead-of-Time（AOT）生成的是TS代码

       -- 流程：

          - typescript开发angular应用

          - 用ngc编译

             用angular编译器对模板进行编译，生成typescript代码

             typescript编译车JavaScript

          - 打包部署

          用户端

          - 下载代码

          - 启动angular

          - 页面渲染

AOT优势

　　1、渲染得更快
　　2、需要的异步请求更少
　　3、需要下载的Angular框架体积更小
　　4、提早检测模板错误
　　5、更安全

JIT优势

　　编译时间短，除非确实有动态组件的需求，否则jit唯一的优势就是能用来做在线 Demo和开发调试。

 17. 什么是Redux?

它是一个帮助我们维护应用程序状态的库。简单的数据流应用程序不需要Redux，它用于具有复杂数据流的单页应用程序。

18. 什么是Pipes?

 此功能用于更改模板上的输出;比如将字符串更改为大写并在模板上显示它。它还可以相应地更改日期格式。

19. ng-Class 和 ng-Style的区别

• ng-Class: 加载css类

• ng-Style:设置css样式

20. component和module的区别？

• component控制视图（html）.组件之间以及组件和service之间互相交互给app提供功能
• module是包括一个或多个组件，module不会控制视图（HTML）。module声明了哪些模块可以被其他模块使用，依赖注入了哪些类，以及启动的component，模块来管理组件，使app实现模块化。

21. 怎样在组件中选择一个元素？

 在组件的constructor中引入 ElementRef 来操作DOM元素

constructor(myElement: ElementRef) { ... }

 

22. 设置base href 标签的作用？

angular路由器使用base href 作为组件、模板的基地址，开发期间，通常会在index.html所在目录中启动服务器，所以这个目录就是根目录，所以可以在index.html 的顶部添加。

当没有配置base标签时，加载应用会失败。

23.  Observer / Observable 

• Observable（可观察者） 接受一个Observer作为参数然后返回unsubscribe函数

        -  特征：

           -- 是一个函数

           -- 接受一个Observer对象（包含next、error、complete方法的对象）作为参数

           -- 返回 unsubscribe 函数，用于取消订阅

         -  作用：

            -- 作为生产者和观察者之间的桥梁，并返回一种方法来解除生产者和观察者之间的关系，其中观察者用于处理时间                  序列上的数据流。

• Observer (观察者)对象

观察者用来接收可观察者发送过来的消息

var observer = {
    next : x => console.log('Observer got a next value' + x),
    error : err => console.error('Observer got a error:' + err),
    complete: () => console.log('Observer got a complete notification')
}

    使用

observable.subscribe(observer);

 

 24. Constructor 和 ngOnInit 的本质区别

• Constructor 

在ES6中 constructor表示构造函数，使用在class中。来初始化操作。当类被初始化之后，构造函数会被调用

• ngOnInit

ngOnInit 是angular中OnInit钩子的实现，用来初始化组件。

ngOnInit  : 在angular 第一次显示数据绑定和设置指令、组件的输入属性之后，初始化指令、组件

所以从angular的生命周期看，constructor是执行在先的

所以既然ngOnchanges是输入属性发生变化的时候调用，并且ngOnInit是在ngOnchanges执行之后才调用，而constructor是在组件实例化的时候就调用了，也就是说，在constructor中是取不到输入属性的值的。

• 使用场景

• constructor 中不适合进行任何和组件通信类似的复杂操作，一般在constructor中进行一些简单的初始化操作，比如依赖注入、变量初始化等。
• ngOnInit可以用来初始化组件之间通信的，如异步请求等

参考：https://www.jianshu.com/p/af1d8f597b29

25.  Angular的懒加载

默认情况下，在初始化的时候所有路由都会加载，导致加载缓慢，启动速度慢，所以可以使用懒加载

懒加载 ： 通俗 的讲就是进入主模块之后，子模块不加载，等真正访问到子模块之后，再去加载。使用loadChildren配置路由

知识点：

• RouterModule.forRoot() 用于主模块 
• RouterModule.forChild() 用于子模块
• loadChildren 

const routes: Routes = [
  {path:'',redirectTo:'child'},
  {path:'child',loadChildren:'./children-load/children-load.module#ChildrenLoadModule'},
  {path:'childNew',loadChildren:'./children-newload/children-newload.module#ChildrenNewloadModule'}
];