我们的应用中的 Angular 闪卡示例

从App Store或Google Play下载我们的应用程序，获取更多免费的闪卡，或订阅以访问所有的闪卡。

描述如何使用Angular中的HTTP拦截器管理请求和响应。

Angular中的HTTP拦截器用于操控HTTP请求和响应。它们可以拦截请求，修改它，并将其传递。它们也可以拦截响应，修改它，并将其传递。要使用HTTP拦截器，我们需要创建一个实现HttpInterceptor接口的服务。

以下是一个如何向应用程序添加拦截器的代码示例：

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class MyHttpInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    // 在这里修改请求
    const modifiedReq = req.clone({
      headers: req.headers.set('Authorization', 'My value'),
    });

    // 在这里传递请求
    return next.handle(modifiedReq);

  }

}

一旦我们定义了拦截器，我们需要将其添加到应用模块的提供者数组中：

@NgModule({
  ...
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: MyHttpInterceptor, multi: true },
  ],
  ...
})
export class AppModule { }

注意，'multi'被设置为true。这允许我们添加多个拦截器，它们将按照提供的顺序执行。您需要记住，拦截器的顺序很重要，因为每一个后续的拦截器都会接收到来自前一个拦截器的请求，因此任何由前一个拦截器所做的修改对下一个拦截器都是可见的。

Angular组件中的数据绑定如何使用@Input()和@Output()工作？

数据绑定是Angular编程的一个关键方面。这使得数据可以动态地在组件间传递。数据绑定包括两种技术：@Input和@Output。

@Input允许从父组件向子组件传递值。这是所谓的单向数据绑定技术-数据从组件层次结构的顶部流向底部。我们用它来标记应该对父组件可见的变量。

使用@Input的例子：

<!--parent.component.html-->
<app-child [childMessage]="parentMessage"></app-child>

// parent.component.ts
parentMessage = "Hello from parent";

// child.component.ts
import {Component,Input }  from '@angular/core';
//..
@Input() childMessage: string;

在上面的例子中，parent.component.ts中的`parentMessage`被传递给child.component.ts中的`childMessage`。

另一方面，@Output允许在相反的方向进行通信-从子组件到父组件。这是所谓的事件绑定技术。使用@Output()装饰器，我们可以在子组件中触发一个事件，并在父组件中处理它。

使用@Output的例子：

<!--parent.component.html-->
<app-child (messageEvent)="receiveMessage($event)"></app-child>

// parent.component.ts
receiveMessage($event) {
  this.message = $event
}

// child.component.ts
import { Component, Output, EventEmitter } from '@angular/core';
//..
@Output() messageEvent = new EventEmitter<string>();

在这种情况下，当child.component.ts中的`messageEvent`被触发时，parent.component.ts中的`receiveMessage`函数被调用，并接收由`messageEvent`发送的值。

什么是NgModel以及它在Angular表单中如何使用？

NgModel是Angular中的一个指令，用于在表单中创建双向数据绑定。双向数据绑定意味着数据既可以从模型传输到视图，也可以从视图传输到模型。在实践中，这意味着用户在表单字段中所做的更改会反映在数据模型中，数据模型的更改将在表单中可见。

在表单中使用NgModel指令非常简单。我们将它放在适当的表单元素中，并使用[(ngModel)]语法将其绑定到适当的模型字段。

例如：

<form>
  <label for="name">姓名：</label>
  <input id="name" [(ngModel)]="person.name">

  <label for="age">年龄：</label>
  <input id="age" [(ngModel)]="person.age">
</form>

其中，“person.name”和“person.age”是绑定到相应表单字段的数据模型字段。用户在这些表单字段中做的任何更改将自动反映在"person"模型中。

记住，要使用NgModel指令，必须在应用程序模块中导入FormsModule。

Angular中的Zone.js是什么，它如何影响应用性能？

Zone.js是一个允许跟踪JavaScript中异步操作的库。在Angular的上下文中，Zone.js是变更检测机制的关键组件。

Zone.js引入了“区域”这个概念，这是全局执行上下文。这些“区域”创建了一个“树”，每个异步操作总是在启动操作的相同区域中发生。因此，我们能够跟踪操作的开始和结束。

示例：
第一个操作可能会触发一个setTimeout，从而调度下一个操作在事件循环的下一轮中进行。虽然这是两个不同的操作，但Zone.js允许我们将它们视为一个整体，这就是异步跟踪。

在Angular中，Zone.js被用来通知框架何时开始变更检测。每个用户动作、计时器或http请求都在“angular区域”中执行。当“angular区域”中的操作完成时，Angular会自动触发变更检测。

有了这个机制，Angular知道何时刷新视图有意义。这就是为什么Zone.js对性能至关重要。如果没有Zone.js，Angular将不得不使用诸如轮询之类的技术来找出何时触发变更检测，这将非常低效。

虽然Zone.js对Angular的性能产生了积极的影响，但它也可能产生负面的影响。如果一个应用程序执行了大量不影响应用程序状态的异步操作，Angular仍然会触发变更检测。在大量操作的情况下，这可能会影响性能。为了防止这种情况，我们可以在“angular区域”之外执行这些操作。

Angular 闪卡

我们的应用中的 Angular 闪卡示例

描述如何使用Angular中的HTTP拦截器管理请求和响应。

Angular组件中的数据绑定如何使用@Input()和@Output()工作？

什么是NgModel以及它在Angular表单中如何使用？

Angular中的Zone.js是什么，它如何影响应用性能？

下载 IT 闪卡 立即

下载 IT 闪卡立即