angular面试题

打算写一下遇到过的angular2+的面试题，持续的记录一下经历的过程。（写一下我所知道的内容，不对的请指正！！）

angular介绍

Angular 是用的 TypeScript 的脚本语言一起构建的开发平台。一般自己通过angular脚手架创建的组件是由三个文件组成的。
（关于angular脚手架或者基本命令，可以看我另一篇angular的文章——安装angular脚手架）

1. HTML文件：只写html
2. .spec.ts文件：spec文件是你的源文件的单元测试文件，Angular应用程序的约定是每个.ts文件都有一个.spec.ts文件。当你使用’ng test’命令时，它们通过Karma任务运行器使用Jasmine javascript测试框架运行。
3. ts文件：下面是ts文件的初始内容。

import { Component } from '@angular/core';

@Component ({
  selector: 'hello-world-interpolation',
  templateUrl: './hello-world-interpolation.component.html'
})
export class HelloWorldInterpolationComponent {
    message = 'Hello, World!';
}

angular属性绑定

可以帮助你设置 HTML 元素的 Property 和 Attribute 的值，并将这些值传给应用的展示逻辑。

<p
  [id]="sayHelloId"
  [style.color]="fontColor">
  You can set my color in the component!
</p>

angular的依赖注入

依赖注入（DI）是 Angular 中的基本概念之一。 DI 被装配进 Angular 框架，并允许带有 Angular 装饰器的类（例如组件、指令、管道和可注入对象）配置它们所需的依赖项
DI 系统中存在两个主要角色：依赖使用者和依赖提供者。

import { _HttpClient } from '@delon/theme'；

export class HelloWorldComponent {
	//注入依赖项的最常见方法是在类的构造函数中声明它。
    constructor(
    	private http: _HttpClient
  ) { }
}

了解：依赖注入让你可以声明 TypeScript 类的依赖项，而无需操心如何实例化它们，Angular 会为你处理这些琐事。这种设计模式能让你写出更加可测试、也更灵活的代码。尽管了解依赖注入对于开始用 Angular 并不是至关重要的事，但我们还是强烈建议你将其作为最佳实践，并且 Angular 自身的方方面面都在一定程度上利用了它。

angular的编译模式

Angular应用程序包含浏览器无法理解的组件和模板。 因此，在浏览器内部运行之前，需要先编译Angular应用程序。
Angular提供了两种编译类型：

1. AOT(Ahead-of-Time) compilation（预先编译）
   • 使用 TypeScript 开发 Angular 应用
   • 运行 ngc 编译应用程序，使用 Angular Compiler 编译模板，一般输出 TypeScript 代码
   • 运行 tsc 编译 TypeScript 代码
   • 使用 Webpack 或 Gulp 等其他工具构建项目，如代码压缩、合并等
   • 部署应用
2. JIT(Just-in-Time) compilation（即时编译）
   • 使用 TypeScript 开发 Angular 应用
   • 运行 tsc 编译 TypeScript 代码
   • 使用 Webpack 或 Gulp 等其他工具构建项目，如代码压缩、合并等
   • 部署应用

AOT是angular的默认编译模式，渲染得更快，需要的异步请求更少，相对更安全，而JIT的编译模式编译时间短，除非确实有动态组件的需求，否则jit唯一的优势就是能用来做在线 Demo和开发调试。

angular组件传值

@Input 父组件向子组件传递数据和传递方法

 @Input() hero!: Hero;
 @Input('master') masterName = '';

<h3>{{hero.name}}</h3>
<p>{{masterName}}</p>

@output 子组件传值给父组件 （事件传递的方式）

import { Component, EventEmitter, Input, Output } from '@angular/core';

@Component({
  selector: 'app-voter',
  template: `
    <h4>{{name}}</h4>
    <button type="button" (click)="vote(true)"  [disabled]="didVote">Agree</button>
    <button type="button" (click)="vote(false)" [disabled]="didVote">Disagree</button>
  `
})
export class VoterComponent {
  @Input()  name = '';
  @Output() voted = new EventEmitter<boolean>();
  didVote = false;

  vote(agreed: boolean) {
    this.voted.emit(agreed);
    this.didVote = true;
  }
}

angular双向数据绑定

data=>view：数据绑定，模板语法是 []
view=>data：事件绑定，模板语法是 ()
Angular的双向绑定就是数据绑定+事件绑定，模板语法是 [()] 。

<app-sizer [(size)]="fontSizePx"></app-sizer>

angular的生命周期

ngOnChanges (){
//面向对象中：类的构造方法
 console.log('ngOnChanges ：构造方法，组件出生的第一时间触发');
 },
 ngOnInit (): void {
// init :初始化，类似于 vue 中的 mounted 
 console.log(' ngOnInit ：组件中的内容开始初始化');
 },
  ngDoCheck (): void {
// init :初始化，类似于 vue 中的 mounted 
 console.log(' ngDoCheck ：检测，并在发生 Angular 无法或不愿意自己检测的变化时作出反应。');
 },
 ngAfterContentInit (): void {
 console.log(' ngAfterContentInit :组件中的数据初始化时触发');
 },
 ngAfterViewInit (): void {
 console.log(' ngAfterViewInit :组件上的 UI 界面初始化时');
 },
 ngAfterContentChecked (): void {
 console.log(' ngAfterContentChecked ：组件上的数据发生变化时');
 },
 ngAfterViewChecked (): void {
 console.log(' ngAfterViewChecked :组件上的 UI 随着数据变化而更新');
 },
 ngOnDestroy (): void {
 console.log(' ngOnDestroy :组件销毁时触发');
 }

angular管道

管道是在模板表达式中使用的简单函数，用于接受输入值并返回转换后的值

// 使用语法
<p>时间：{{ myDate | date: 'yyyy-mm-dd' }}</p>

Angular 为典型的数据转换提供了内置的管道，包括国际化的转换（i18n），它使用本地化信息来格式化数据。数据格式化常用的内置管道如下：

DatePipe：根据本地环境中的规则格式化日期值。

UpperCasePipe：把文本全部转换成大写。

LowerCasePipe ：把文本全部转换成小写。

CurrencyPipe ：把数字转换成货币字符串，根据本地环境中的规则进行格式化。

DecimalPipe：把数字转换成带小数点的字符串，根据本地环境中的规则进行格式化。

PercentPipe ：把数字转换成百分比字符串，根据本地环境中的规则进行格式化。

angular的核心部件

1、模块（Modules）

2、组件（Components）

3、模版（Templates）

4、元数据（Metadata）

5、数据绑定（Data Binding）

6、指令（Directives）

7、服务（Services）

8、依赖注入（Dependency Injection）

9、路由（routing）

service服务

Angular 将组件与服务区分开来，是为了提高模块化程度和可复用性。通过将组件中与视图相关的特性与其他类型的处理分离开，可以让你的组件类更加精简高效。
组件可以将某些任务委托给服务，例如从服务器获取数据、验证用户输入或直接把日志记录到控制台。通过在可注入服务类中定义这样的处理任务，你可以让这些任务可用于任何组件。你还可以通过在不同的情况下注入同一个服务的不同提供者来让你的应用程序适应更多场景。

//要将服务作为依赖项注入到组件中，你可以使用组件的 constructor()
//并为构造函数添加一个该依赖类型的参数。
constructor(heroService: HeroService)

angular路由

1. 生成路由命令

ng new routing-app --routing --defaults

2. 显示 404 页面可使用通配符路由

const routes: Routes = [
  { path: '**', component: PageNotFoundComponent }, 
];

3. 嵌套路由

const routes: Routes = [
  {
    path: 'father',
    component: FatherComponent, // 父级路由
    children: [
      {
        path: 'son', 
        component: SonComponent, // 子级路由
      }
    ],
  },
];

4. 页面标题：应用程序中的每个页面都应该有一个唯一的标题，以便可以在浏览器历史记录中识别它们。Router 使用 Route 配置中的 title 属性设置文档的标题。

{
 	path: 'sun',
    title: '哈哈哈',
    component: SunComponent
}

5. 路由传值

• queryParams传值

<!-- 传值的组件 -->
<ion-card class="card" [routerLink]="['/home/audit']" [queryParams]="data">
</ion-card>

//接收值的组件
import { ActivatedRoute } from '@angular/router';
//route依赖注入
constructor(private route: ActivatedRoute, private mapSrv: AuditService) { }

  ngOnInit() {
    this.route.queryParams.subscribe((data) => {
      console.log(data);//传的值
    });
  }

• 动态路由params传值

<!-- 传值的组件 -->
<ion-card class="card" [routerLink]="['/home' , 'data']">
</ion-card>

//接收值的组件
import { ActivatedRoute } from '@angular/router';
//route依赖注入
constructor(private route: ActivatedRoute, private mapSrv: AuditService) { }

  ngOnInit() {
    this.route.params.subscribe((data) => {
      console.log(data);//传的值
    });
  }

const routes: Routes = [{ path: 'home/:id', component: HomeComponent }],
// 这个id就是一个动态值，可以让我们在url中动态输入

6. 路由懒加载
   你可以配置路由定义来实现懒加载模块，这意味着 Angular 只会在需要时才加载这些模块，而不是在应用启动时就加载全部。可以提高页面加载速度，提升性能。

//要懒加载模块，在根路由模块的 routes 中使用 loadChildren 代替 component 进行配置
const routes: Routes = [
  {
    path: 'item',
    loadChildren: () => import('./item/item.module').then(m => m.ItemModule)
  }//ItemModule是item组件自身路由下的Item.module.ts中的，如果是通过脚手架新增的则不需要手动配置
];

//在懒加载模块自身的路由模块中，添加一个指向该组件的路由。
const routes: Routes = [
  {
    path: '',//单个组件，省略名字
    component: ItemComponent
  }
];

7. 预加载模块
   预加载模块通过在后台加载部分应用来改善用户体验。这样一来，用户在激活路由时就无需等待下载这些元素。

import { RouterModule, PreloadAllModules } from '@angular/router'
//要启用所有惰性加载模块的预加载，导入 PreloadAllModules
@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      preloadingStrategy: PreloadAllModules
    })
  ],
  exports: [RouterModule]
})

8. 路由守卫
   CanActivate：导航到某路由的情况
   CanActivateChild：导航到某子路由的情况
   CanDeactivate：从当前路由离开的情况
   Resolve：在路由激活之前获取路由数据
   CanLoad：异步导航到某特性模块的情况

angular表单

Angular 提供了两种不同的方法来通过表单处理用户输入：响应式表单和模板驱动表单。 两者都从视图中捕获用户输入事件、验证用户输入、创建表单模型、修改数据模型，并提供跟踪这些更改的途径。

• 响应式表单：提供对底层表单对象模型直接、显式的访问。它们与模板驱动表单相比，更加健壮：它们的可扩展性、可复用性和可测试性都更高。如果表单是你的应用程序的关键部分，或者你已经在使用响应式表单来构建应用，那就使用响应式表单。
• 模板驱动表单：依赖模板中的指令来创建和操作底层的对象模型。它们对于向应用添加一个简单的表单非常有用，比如电子邮件列表注册表单。它们很容易添加到应用中，但在扩展性方面不如响应式表单。如果你有可以只在模板中管理的非常基本的表单需求和逻辑，那么模板驱动表单就很合适。

Rxjs

RxJS 是一个异步编程的库，同时它通过 observable序列来实现基于事件的编程。它提供了一个核心的类型： Observable ，几个辅助类型（Observer，Schedulers ， Subjects ），受到 Array 的扩展操作( map , filter , reduce , every 等等)启发，允许直接处理异步事件的集合。
ReactiveX 结合了 Observer 模式、 Iterator 模式和函数式编程和集合来构建一个管理事件序列的理想方式。在 RxJS 中管理异步事件的基本概念中有以下几点需要注意：

• Observable :代表了一个调用未来值或事件的集合的概念
• Observer :代表了一个知道如何监听
• Observable 传递过来的值的回调集合
• Subscription :代表了一个可执行的
• Observable ,主要是用于取消执行
• Operators :是一个纯函数,允许处理集合与函数式编程风格的操作，比如 map 、 filter 、 concat 、 flatMap 等
• Subject :相当于一个 EventEmitter ，它的唯一的方法是广播一个值或事件给多个 Observer · Schedulers :是一个集中式调度程序来扫并发性,允许我们在 setTimeout 或者requestAnimationFrame 上进行协调计算

NgRx

NgRx（Reactive State for Angular ）：是一款集成RxJS的Angular状态管理库。
它和Redux的核心思想相同，但使用RxJS实现观察者模式。它遵循Redux核心原则，是专门为Angular而设计。
Observable(被观察者)
Observer(观察者)
Operators(操作符)
Subscribtion(订阅)
Subject(主题)
Scheduler(调度器)

angular引入组件库（以jquery为例）

安装jquery

npm install jquery --save //直接会安装到node包并会自动在package.json里做依赖和声明
npm install @types/jquery --save-dev//由于angular是使用TypeScript，所以还需安装对应的类型描述模块

单独组件引入：

import * as $ from 'jquery'

全局引入：

//angular.json中引入 *注意分类*
"scripts": ["./node_modules/jquery/dist/jquery.min.js"]

代码007普通

打赏 收藏 海报 链接