angular interview questions

angular interview questions和答案

如果您喜欢该项目，请单击@sudheerjonna以获取技术更新。

1. 以这个角度的方式从一个完整的角度初学者到自信地从头开始构建企业级应用程序
2. 如果您认真雇用并且没有CS学位，请参加此编码面试训练营

目录

1. 什么是角框架？

   Angular是一个基于打字稿的开源前端平台，它使构建网络，移动和桌面应用程序变得易于使用。该框架的主要特征包括声明模板，依赖注入，端到端工具，从而简化应用程序开发。

⬆回到顶部

2. Angularjs和Angular之间有什么区别？

   AngularJS（1.x版）是JavaScript框架，而Angular（2+版）是使用Typescript的AngularJ的完整重写，提供了更好的性能，移动支持，模块化和更现代的体系结构。

   这是表格格式的一些主要差异： –

   Angularjs	角
   它基于MVC架构	这是基于服务/控制器
   它使用JavaScript构建应用程序	使用TypeScript构建应用程序
   基于控制器概念	这是基于组件的UI方法
   不支持移动平台	完全支持移动平台
   难以构建SEO友好应用	轻松构建SEO友好应用程序

⬆回到顶部

3. 什么是打字稿？

   Typescript是由Microsoft创建的JavaScript的强烈键入的Superset，它添加了可选类型，类，异步/等待以及许多其他功能，并将其编译到Plain JavaScript中。 Angular完全用打字稿作为主要语言编写。您可以在全球安装打字稿

   npm install -g typescript

   让我们看看一个简单的打字稿用法示例： –

    function greeter ( person : string ) {
       return \"Hello, \" + person ;
   }
   
   let user = \"Sudheer\" ;
   
   document . body . innerHTML = greeter ( user ) ;

   Greeter方法仅允许字符串类型作为参数。

⬆回到顶部

4. 写出角度建筑的图表？

   角应用的主要构建块显示在下图： –

⬆回到顶部

5. 角度的关键组成部分是什么？

   Angular具有以下关键组件，

   1. 组件：这些是控制HTML视图的角应用的基本构建块。
   2. 模块：一个角模块是一组角度基本构建块，例如组件，指令，服务等。将应用程序分为逻辑片段，每个代码都称为“模块”，执行一个任务。
   3. 模板：这些代表了角度应用的视图。
   4. 服务：用于创建可以在整个应用程序中共享的组件。
   5. 元数据：可以用来向角类添加更多数据。

⬆回到顶部

6. 什么是指令？

   指令将行为添加到现有的DOM元素或现有组件实例中。

    import { Directive , ElementRef , Input } from \'@angular/core\' ;
   
   @ Directive ( { selector : \'[myHighlight]\' } )
   export class HighlightDirective {
       constructor ( el : ElementRef ) {
          el . nativeElement . style . backgroundColor = \'yellow\' ;
       }
   }

   现在，该指令扩展了HTML元素行为，其黄色背景如下

    < p myHighlight > Highlight me! </ p >

⬆回到顶部

7. 什么是组件？

   组件是Angular应用程序中最基本的UI构建块，该块形成了角度成分树。这些组件是指令的子集。与指令不同，组件始终具有模板，并且在模板中每个元素只能实例化一个组件。让我们看看一个角度的简单示例

    import { Component } from \'@angular/core\' ;
   
   @ Component ( {
      selector : \'my-app\' ,
      template : ` <div>
         <h1>{{title}}</h1>
         <div>Learn Angular6 with examples</div>
      </div> ` ,
   } )
   
   export class AppComponent {
      title : string = \'Welcome to Angular world\' ;
   }

⬆回到顶部

8. 组件和指令之间有什么区别？

   简而言之，一个组件（@component）是指令 – template。

   一些主要差异以表格形式提及

   成分	指示
   要注册一个组件，我们使用@component Meta-data注释	要注册指令，我们使用@Directive Meta-data注释
   组件通常用于创建UI小部件	指令用于将行为添加到现有的DOM元素中
   组件用于将应用程序分解为较小的组件	指令用于设计可重复使用的组件
   每个DOM元素只能存在一个组件	每个DOM元素都可以使用许多指令
   @View Decorator或TemplateUrl/Template是强制性的	指令不使用视图

⬆回到顶部

9. 什么是模板？

   模板是HTML视图，您可以通过将控件绑定到角组件的属性来显示数据。您可以将组件的模板存储在两个地方之一。您可以使用Template属性对其进行内联定义，也可以在单独的HTML文件中定义模板，并使用@Component Deminator的TemplateUrl属性在组件元数据中链接到它。

   使用模板语法使用内联模板，

    import { Component } from \'@angular/core\' ;
   
   @ Component ( {
      selector : \'my-app\' ,
      template : \'
         < div >
            < h1 > { { title } } < / h 1 >
            < div > Learn Angular < / d i v >
         < / div >
      \'
   } )
   
   export class AppComponent {
      title : string = \'Hello World\' ;
   }

   使用单独的模板文件，例如app.component.html

    import { Component } from \'@angular/core\' ;
   
   @ Component ( {
      selector : \'my-app\' ,
      templateUrl : \'app/app.component.html\'
   } )
   
   export class AppComponent {
      title : string = \'Hello World\' ;
   }

⬆回到顶部

10. 什么是模块？

    模块是您应用程序中的逻辑边界，并且应用程序分为单独的模块以分开应用程序的功能。让我们以@ngmodule Decorator声明的app.module.ts root模块的示例，如下

     import { NgModule }      from \'@angular/core\' ;
    import { BrowserModule } from \'@angular/platform-browser\' ;
    import { AppComponent }  from \'./app.component\' ;
    
    @ NgModule ( {
       imports :      [ BrowserModule ] ,
       declarations : [ AppComponent ] ,
       bootstrap :    [ AppComponent ] ,
       providers : [ ]
    } )
    export class AppModule { }

    NGMODULE装饰器具有五个重要的（所有）选项：

    1. 导入选项用于导入其他因模块。默认情况下，对于任何基于Web的角度应用程序，默认情况下都需要BrowerModule。
    2. 声明选项用于在相应模块中定义组件。
    3. Bootstrap选项告诉Angular哪个组件在应用程序中引导。
    4. 提供者选项用于配置该模块注射器中可用的一组可注射对象。
    5. 输入程序选项是动态加载到视图中的一组组件。

⬆回到顶部

11. 什么是生命周期挂钩？

    Angular应用程序遍历整个过程，或者从其启动到应用程序结束的生命周期。图片表示中生命周期的表示如下，

    每个生命周期方法的描述如下，

    1. ngonchanges：当数据绑定属性的值发生变化时，则调用此方法。
    2. NGONINIT：每当Angular首次显示数据结合属性后的指令/组件的初始化时，这就是称为这一点。
    3. NGDOCHECK：这是用于检测的，并且要对Angular无法或不会单独检测的变化行动。
    4. NGAFTERCONTENTINIT：在Angular将外部内容投影到组件视图之后，这是响应的。
    5. NGAFTERCONTENTENTENTECTED：在Angular检查投影到组件中的内容后，这是响应的。
    6. ngafterviewinit：在Angular初始化组件的观点和儿童视图之后，这是响应的。
    7. NGAFTERVIEWCHECKED：在Angular检查组件的视图和子女视图之后，这是响应的。
    8. Ngondestroy：这是Angular摧毁指令/组件之前的清理阶段。

⬆回到顶部

12. 什么是数据绑定？

    数据绑定是Angular中的核心概念，可以定义组件和DOM之间的通信，因此在不担心推动和提取数据的情况下定义交互式应用程序非常容易。数据结合的四种形式（分为3个类别）在数据流动的方式上有所不同。

    1. 从组件到DOM：

       插值： {{value}}：从组件中添加属性的值

        < li > Name: {{ user.name }} </ li >
       < li > Address: {{ user.address }} </ li >

       属性绑定： [属性] =“值”：该值将从组件传递给指定属性或简单的HTML属性

        < input type =\" email \" [value] =\" user.email \" >

    2. 从DOM到组件：事件绑定：（event）=“函数”：发生特定的DOM事件（例如：单击，更改，键），请在组件中调用指定方法

        < button (click) =\" logout() \" > </ button >

    3. 双向绑定：双向数据绑定： [（ngmodel）] =“ value”：双向数据绑定允许双向数据流。例如，在下面的代码段中，电子邮件dom输入和组件电子邮件属性均已同步

        < input type =\" email \" [(ngModel)] =\" user.email \" >

⬆回到顶部

13. 什么是元数据？

    元数据用于装饰类，以便可以配置类的预期行为。元数据由装饰器代表

    1. 班级装饰器，例如@component和@ngmodule

        import { NgModule , Component } from \'@angular/core\' ;
       
       @ Component ( {
         selector : \'my-component\' ,
         template : \'<div>Class decorator</div>\' ,
       } )
       export class MyComponent {
         constructor ( ) {
           console . log ( \'Hey I am a component!\' ) ;
         }
       }
       
       @ NgModule ( {
         imports : [ ] ,
         declarations : [ ] ,
       } )
       export class MyModule {
         constructor ( ) {
           console . log ( \'Hey I am a module!\' ) ;
         }
       }

    2. 属性装饰器用于类内部的属性，例如@input和@output

        import { Component , Input } from \'@angular/core\' ;
       
       @ Component ( {
           selector : \'my-component\' ,
           template : \'<div>Property decorator</div>\'
       } )
       
       export class MyComponent {
           @ Input ( )
           title : string ;
       }

    3. 方法用于课程中的方法，例如@hostlistener

        import { Component , HostListener } from \'@angular/core\' ;
       
       @ Component ( {
           selector : \'my-component\' ,
           template : \'<div>Method decorator</div>\'
       } )
       export class MyComponent {
           @ HostListener ( \'click\' , [ \'$event\' ] )
           onHostClick ( event : Event ) {
               // clicked, `event` available
           }
       }

    4. 参数装饰器用于类构造函数内的参数，例如@inject，@optional

        import { Component , Inject } from \'@angular/core\' ;
       import { MyService } from \'./my-service\' ;
       
       @ Component ( {
           selector : \'my-component\' ,
           template : \'<div>Parameter decorator</div>\'
       } )
       export class MyComponent {
           constructor ( @ Inject ( MyService ) myService ) {
               console . log ( myService ) ; // MyService
           }
       }
       
       // Angular v18 and above
       
       import { Component , inject } from \'@angular/core\' ;
       import { MyService } from \'./my-service\' ;
       
       @ Component ( {
           selector : \'my-component\' ,
           template : \'<div>Parameter decorator</div>\'
       } )
       export class MyComponent {
       myService : MyService = inject ( MyService )
           constructor ( ) {
               console . log ( myService ) ; // MyService
           }
       }

⬆回到顶部

14. 什么是角CLI？

    Angular CLI（命令行接口）是一个命令行接口，可以使用Nodejs样式（COMPORJS）模块构建脚手架和构建角应用程序。您需要使用低于NPM命令安装，

     npm install @angular/cli@latest
    

    以下是少数命令的列表，在创建Angular项目时会很方便

    1. 创建新项目：新项目

    2. 生成组件，指令和服务： ng生成/g不同类型的命令将是，

       • NG生成类my-new-class：将类添加到您的应用程序
       • ng生成组件my-new-component：在应用程序中添加一个组件
       • NG生成指令我的新指导：向您的应用程序添加指令
       • ng生成枚举my-new-enum：向您的应用程序添加枚举
       • NG生成模块my-new模块：向您的应用程序添加一个模块
       • NG生成管道my-new-pipe：在您的应用程序中添加管道
       • NG生成服务我的新服务：向您的应用程序添加服务

    3. 运行该项目： NG服务

⬆回到顶部

15. 构造函数和ngoninit有什么区别？

    构造函数是类实例化时执行的类的默认方法，并确保了类及其子类中字段的适当初始化。角度或更好的依赖性喷油器（DI）分析构造函数参数，并通过调用新的myClass（）创建新实例时，它试图找到与构造函数参数类型相匹配的提供商，并将它们解析并传递给构造函数。
    Ngoninit是Angular调用的生命周期钩，以表明Angular正在创建组件。
    通常，我们将ngoninit用于所有初始化/声明，并避免在构造函数中工作。构造函数仅应用于初始化类成员，但不应进行实际的“工作”。因此，您应该使用constructor（）来设置依赖注入，而不是其他。 ngoninit（）是“启动”的更好的地方 – 这是解决组件绑定的地方。

     export class App implements OnInit {
      constructor ( private myService : MyService ) {
         //called first time before the ngOnInit()
      }
    
      ngOnInit ( ) {
         //called after the constructor and called  after the first ngOnChanges()
         //e.g. http call...
      }
    }

⬆回到顶部

16. 什么是服务？

    当需要向各种模块提供通用功能时，使用服务。服务可以通过允许您从组件中提取共同的功能来更大地分离应用程序的关注点和更好的模块化。

    让我们创建一个可用于跨组件的存储库，

     import { Injectable } from \'@angular/core\' ;
    import { Http } from \'@angular/http\' ;
    
    @ Injectable ( { // The Injectable decorator is required for dependency injection to work
      // providedIn option registers the service with a specific NgModule
      providedIn : \'root\' ,  // This declares the service with the root app (AppModule)
    } )
    export class RepoService {
      constructor ( private http : Http ) {
      }
    
      fetchAll ( ) {
        return this . http . get ( \'https://api.*gi*t*hub.com/repositories\' ) ;
      }
    }

    以上服务使用HTTP服务作为依赖关系。

⬆回到顶部

17. 什么是角度注入角度？

    依赖注入（DI）是一个重要的应用设计模式，其中一类要求从外部来源寻求依赖性而不是创建它们本身。 Angular带有其自身的依赖注入框架来解决依赖关系（类或类执行其功能的服务或对象）。因此，您可以在整个应用程序中获得服务取决于其他服务。

⬆回到顶部

18. 如何形成依赖性层次结构？

    Angular中的注射器具有可以利用的规则，以实现应用程序中注射剂的所需可见性。通过了解这些规则，您可以确定应在哪种NGMODULE，组件或指令中声明提供商。

    Angular有两个喷油器层次结构：

    模块喷油器

    当Angular启动时，它会创建一个将注册服务的根喷油器，这些注射是通过注射注释提供的。 ng-model属性中提供的所有服务称为提供商（如果这些模块没有懒惰）。

    递归递归遍历应用程序中使用的所有模型，并为根喷油器中提供的服务创建实例。如果您在急切的型号中提供了一些服务，则该服务将被添加到根喷油器中，这使其在整个应用程序中可用。

    平台模块

    在应用程序引导时，Angular创建了更多的喷油器，在root Imptor上方goe Platform Injextor上，该喷油器是由main.ts文件中的平台浏览器动态函数创建的，并且它提供了一些平台特定的功能，例如DomSanitizer 。

    nullinjector（）

    在最上面，层次结构中的下一个父型喷油器是NullInjector() 。除非您使用@optional（），否则该注射器的责任是丢弃错误，除非您使用@Optional() ，因为最终，所有内容最终都会在NullInjector()中结束，并且它返回错误或返回@Optional() ， null 。

    元素注射器

    Angular为每个DOM元素隐式创建ElementInjector层次结构。正在为与Angular组件或任何应用指令的任何标签创建ElementInjector喷油器，并且您可以在提供商的属性内部的组件和指令注释中配置它，因此，它可以创建其自己的层次结构。

⬆回到顶部

19. 异步管的目的是什么？

    异步Pipe订阅了可观察的或承诺，并返回其发出的最新价值。当发出新值时，管道会标记要检查更改的组件。

    让我们花一些时间可观察到，该时间在当前时间内每2秒钟不断更新视图。

    @ Component ( {
    
      selector : \'async-observable-pipe\' ,
    
      template : `<div><code>observable|async</code>:
    
           Time: {{ time | async }}</div>`
    
    } )
    
    export class AsyncObservablePipeComponent {
    
      time : Observable < string <span cla