yanyi24的博客

Angular 权限管理的两种解决方案在做后台管理系统的时候，权限管理应该是必备的功能点了。这一节我们介绍两种方案来确定用户权限。首先，我们面板是这个样子，先让大家有一个基础印象：准备工作首先我们通过 cli工具新建了一个 heroes模块，所有工作我们都将在这个模块中完成；其次新建了 heroes-add、 heroes-list、 heroes-login、 heroes-modify四个页面模块，来分别实现不同的功能；最后通过子路由的方式配置了项目的路由信息，以便让项目跑起来。封

HTTP拦截器前面我们介绍了Angular 全家桶中 HTTP 部分的基础用法，能够满足开发中的基本需求。为了让我们的教程更贴近实战，拦截器是我们绕不过的话题。拦截器可以用一种常规的、标准的方式对每一次 HTTP的请求/响应任务执行从认证到记日志等很多种隐式任务。如果没有拦截机制，那么开发人员将不得不对每次 HttpClient调用显式实现这些任务。比如每次设置请求头中的 token。编写拦截器要实现拦截器，就要实现一个实现了 HttpInterceptor接口中的 intercept()方法

http使用 HTTP与后端服务进行通信是开发中绕不过的问题。本节将介绍 Angular中内置的 HTTP模块，也就是 @angular/common/http中的 HttpClient服务类。准备工作按照惯例，我们还是建一个单独的模块进行介绍。ng g m http-studyng g c http-study -c OnPushng g s http-study/http-study并引入 HttpStudyService：// http-study.component.ts

表单验证通常，我们都需要对用户的表单输入做验证，以保证数据的整体质量。Angular也有两种验证表单的形式：使用属性验证，用于模板驱动表单；使用验证器函数进行验证，用于响应式表单。验证器（Validator）函数验证器函数可以是同步函数，也可以是异步函数。同步验证器：接受控件实例，然后返回验证错误信息或 null。在实例化一个 FormControl时把它作为构造函数的第二个参数传进去；异步验证器 ：接受实例并返回一个 Promise或 Observable，稍后会发出一组验证错误或

表单angular 中提供了两种表单形式：响应式表单和模板驱动表单。理论准备选择适合你的表单形式：响应式表单提供对底层表单对象模型直接、显式的访问。它们与模板驱动表单相比，更加健壮：它们的可扩展性、可复用性和可测试性都更高。适用于比较复杂的表单。模板驱动表单依赖模板中的指令来创建和操作底层的对象模型。它们很容易添加到应用中，但在扩展性方面不如响应式表单。适用于简单的表单。无论哪种形式的表单，都会有下面4个常用基础类：FormControl实例用于追踪单个表单控件的值和验证状态；Fo

异步路由在日常的开发中，我们的程序可能有很多模块，如果我们还是按照在打开程序时就全部加载所有内容的常规方式，就会出现加载缓慢的问题。使用异步路由，就能解决这个问题。懒加载路由顾名思义，懒加载就是最初不加载，在需要的时候才加载组件。我们将改造前面的 admin组件为懒加载模式。实现方式也很简单，只需要简单的三步：将原来的 admin-routing中 admin配置的 path设为空(''):// admin-routing.module.ts{ path: '', compo

路由守卫所谓守卫，不就是把守出入口以控制进出的作用吗？路由守卫也就是掌控用户导航到应用不同场景的手段。简介到本系列教程目前为止，任何用户都能在任何时候导航到任何地方。但有时候出于种种原因需要控制对该应用的不同部分的访问。可能包括如下场景：该用户可能无权导航到目标组件或者需要先登录（认证）才能访问；在显示目标组件前，你可能得先获取某些数据；在离开组件前，你可能要先保存修改或者根据用户意愿判定是否保持。你可以往路由配置中添加守卫，来处理这些场景。 守卫返回一个值，以控制路由器的行为：如

多级路由多级路由，又称子路由，是前端框架中不可或缺的一部分。多级路由前面我们已经有了一个用户的列表，这次我们的需求是: 点击每个用户数据，展示详情信息在本页面。先创建一个 user组件，用来展示详情信息：ng g c components/router-study/user/user -s -t -c OnPush --flat使用 children配置子路由：// router-study-routing.module.tsimport {UserComponent} from

路由参数及跳转本节介绍路由参数及跳转相关。准备工作首先，我们需要将上一节的 CommentService、 UserService抽离成单独的文件，以便多处使用。ng g s components/router-study/comment/commentng g s components/router-study/user/user复制上节代码到对应文件：// comment.service.ts@Injectable()export class CommentService {

angular 路由-1.0 初体验任何一个前端框架，页面路由是绕不过的话题。从现在开始，介绍 angular 路由。准备工作为了更形象的演示，我们先模拟一些数据。在 src/app下创建一个 data文件夹储存数据。// src/app/data/data.type.tsexport interface Comment{ postId: number; id: number; name: string; email: string; body: string;}ex

为了练习rxjs操作符，本节将实现一个基础的拖拽功能。先来看具体效果：实现原理：通过鼠标移动，计算鼠标在页面中的位置，从而改变DOM元素绝对定位的left、top值。实现思路：首先css设置DOM元素为绝对定位；捕获鼠标点击之后的鼠标移动事件，实时计算鼠标位置，直到mouseup;边界判断并实时修改位置。先来一个边界判断计算值的方法：getValue(value, max, min): number { return Math.min(Math.max(value,.

学了再多的概念，如果没有实战，都是徒劳。这一节将写一个输入框搜索请求后台数据，显示在页面上的例子。创建一个 rxjs-demo组件，并采用 OnPush策略：ng g c components/rxjs-demo -c OnPush -s -t需求分析获取输入框 input时的值；通过输入值请求接口，返回数据；每次键入，只请求最新的 value根据键入速度，节流如果 input的 value没发生变化，不重复请求错误处理。页面代码：<div class.

这一节介绍RxJs多播操作符单播和多播单播：之前我们看到的所有 Observable都是单播的，即源头有值发出时，不管这个 Observable被几个 Observer订阅，我一次只会给一个 Observer推送。多播：当源头有值发出时，这个值会同一时间发给所有的 Observer。简单来说，单播与多播的区别类似于，concat和 merge的区别。单播：import { range } from 'rxjs';const source$ = range(5);// 先输出A: 0...

这一节介绍RxJs错误处理类、工具类、数字操作类操作符工具类操作符从打印日志、处理通知到设置调度器，这些操作符提供了一些有用的工具以补充你的 Observable工具箱。tap类似 console.log，多用于调试，会返回源 Observable的值，不转换值import { fromEvent } from 'rxjs';import { tap, map } from 'rxjs/operators';fromEvent(document, 'click').pipe( tap.

这一节我们介绍筛选类操作符筛选操作符在基于推送的方式下，选择接受项的方式和时间很重要。这些操作符提供了从 observable源中接受值和处理backpressure(背压)的技术。audit在目标 observable发出值之前，会忽略所有源 observable发出的值，直到目标 observable发出值，会推送源 observable最近发出的一次值。import { interval, fromEvent } from 'rxjs';import { audit, pluck } .

这一节我们介绍转换类操作符转换操作符顾名思义，转换即是返回你需要的新的值。在通过操作符链时进行值的转换是一个常见的任务。这些操作符提供了转换技术几乎可以涵盖你所能遇到的任何场景。buffer用数组收集一个流发出的值，直到另一个流发出值，就把当前已收集到的值发出并释放。import { interval, fromEvent } from 'rxjs';import { buffer } from 'rxjs/operators';const myInterval = interval(1.

操作符是 observables背后的马力，为复杂的异步任务提供了一种优雅的声明式解决方案。rxjs有八种类型的操作符，分别是：组合、条件、创建、错误处理、多播、过滤、转换、工具。我们将通过多节内容来介绍全部常用的操作符。（参考文档：https://rxjs-cn.github.io/learn-rxjs-operators/operators/）tips:通常情况下，我们是不会通过new Observable()形式去创建一个可观察对象的，都是使用操作符来创建。创建类型操作符这些运算符几乎允许.

RxJS是一个主要用于处理异步程序的函数式编程库，可以把 RxJS想成处理异步行为的 Lodash，在angular中被大量使用，所以，了解它是必须的。观察对象Observable在介绍RxJs之前，我们有必要先了解下可观察对象（Observable）。观察者（Observer）模式是一个软件设计模式，它有一个对象，称之为主体 Subject，负责维护一个依赖项。可观察对象（Observable）是声明式的 —— 也就是说，虽然你定义了一个用于发布值的函数，但是在有消费者订阅它之前，这个.

多级注入器Angular中的注入器有一些规则，你可以利用这些规则来在应用程序中获得所需的可注入对象可见性。通俗的讲，这些规则指定了注入器的“作用域"。两个注入器层次结构Angular中有两个注入器层次结构：ModuleInjector层次结构 —— 在 @NgModule()或 @Injectable()中提供的服务。ElementInjector层次结构 —— 在 @Directive()或 @Component()中提供的服务。服务查找规则(令牌解析规则)优先查找Ele

依赖提供者前面我们简单介绍了依赖注入的用法，通过providers注入一个类，这样的方式被称为类提供者。其实，也可以提供一个替代类、一个对象或一个工厂函数作为提供者。(原文阅读)类提供者正如我们前面的介绍，演示的就是类提供者的创建和使用// comment.service.tsimport { Injectable } from '@angular/core';import comments from '../data/comments';@Injectable()export clas

依赖注入依赖注入（DI-Dependency injection）是一种重要的应用设计模式。 Angular有自己的 DI框架，在设计应用时常会用到它，以提升它们的开发效率和模块化程度。依赖，是当类需要执行其功能时，所需要的服务或对象。 DI是一种编码模式，其中的类会从外部源中请求获取依赖，而不是自己创建它们。(原文阅读)题外话-带修饰符的参数在ts中，一个类的参数如果带上修饰符，那个参数就变成了类的实例属性class Mobile { constructor(readonly name:

如果说，之前在模版中调用的组件为静态组件（比如：app-xxx）那么不用在模版里声明，而是通过ts动态插入到dom中到组件，可以视为动态组件（原文阅读）我们将通过一个alert组件来解释创建动态组件的步骤，最后效果如下：创建静态组件ng g c components/alert -s -c OnPush-c OnPush就是更改angular变更检测策略，--changeDetection=Default|OnPush的简写，会自动在组件里添加OnPush模式:// alert.comp.

对于单页面应用来说，组件的生命周期在开发中至关重要。了解生命周期，在适当的时机处理不同的逻辑，从而使应用更加合理与健壮。（原文阅读）定义：当 Angular实例化组件类并渲染组件视图及其子视图时，组件实例的生命周期就开始了。生命周期一直伴随着变更检测，Angular会检查数据绑定属性何时发生变化，并按需更新视图和组件实例。当 Angular销毁组件实例并从 DOM中移除它渲染的模板时，生命周期就结束了。tips：演示将在life-cycle组件中进行。生命周期顺序Angular有以下8个生命周期.

管道，通过逻辑简单处理模板中数据的一种方式，用法简单，是开发中很重要的简化代码的利器。（原文阅读）元数据说明name: string–在模板中绑定时使用的管道名。 通常使用 lowerCamelCase拼写方式，因为名字中不允许包含减号（-）。pure?: boolean–为 true时，该管道是纯管道，也就是说 transform()方法只有在其输入参数变化时才会被调用。管道默认都是纯管道。用法{{ exp | myPipe }}内置管道Angular有很多内置管道供我们使.

ContentChild与ContentChildren跟我们上一节介绍的ViewChild与ViewChildren用法几乎一致。他们都是装饰器，但是区别在于，前者是获取投影（ng-content）中的组件、元素等。（原文阅读）@ContentChild()ContentChild的元数据跟ViewChild一样，也是有下面三个：selector- 用于查询的指令类型或名字。read- 从查询到的元素中读取另一个令牌。static- 如果为true，则在更改检测之前解析查询结果；.

在任何js框架下，获取元素都是常用且重要的操作。这一节，我们将介绍Angular中如何使用ViewChild来获取DOM元素、组件、指令。（原文阅读）在这之前，我们需要先了解一个Angular的生命周期函数AfterViewInitAfterViewInit定义：一个生命周期钩子，会在 Angular 完全初始化了组件的视图后调用。在组件中注入这个钩子函数后，就必须实现它的方法ngAfterViewInit()。（不用担心，编辑器会提示你的）ngAfterViewInit()一个回调方法，它.

ng-content上一节我们介绍了NgTemplateOutlet指令，它可以实现类似标签的功能，但是呢，好像离真正的还是差了一点点距离。，就是我们想要的那一个。到目前为止，我们调用组件的形式是下面的形式（以以前的dialog组件为例）：<!-- app.component.html --><app-dialog></app-dialog>页面效果是这样的：弹窗组件，其内容部分应该是可以完全定制的，也就是在调用的时候指定内容的。使用上节内容，其实可以

NgTemplateOutlet指令前面我们有写过一个dialog组件，其中有一个功能点我们是没有实现的，那就是不能传入自定义组件内容。写过vue的兄弟些肯定了解<slot>这个标签，这一节，我们了解下NgTemplateOutlet结构指令，可以实现类似<slot>的功能。(原文阅读)需求分析：创建一个子组件，并且有默认内容父组件能够传入自定义内容父组件能够访问子组件内部变量ngTemplateOutletngTemplateOutlet是一个结构

指令Angular 提供了两种内置指令：属性型指令和结构型指令。(原文阅读)属性型指令属性型指令用于改变一个 DOM 元素的外观或行为，不会改变 DOM 结构。组件是一种特殊的指令为了验证这一点，我们来修改一点我们以前app-ng-for组件的代码：// ng-for.component.ts// 修改组件里selector为属性选择器形式（我们之前说过，这里的值就是一个选择器而已）@Component({ selector: '[app-ng-for]', // ...}

ngIf、ngSwitch、ngForOf这一节，我们将介绍angular内置指令：ngIf、ngSwitch、ngForOf。这也是日常开发中经常会遇到的常见指令。原文阅读ngIfngIf是内置的结构型指令，控制宿主元素的添加或删除，取决于绑定的值是否为真。（跟vue的v-if是类似的，不是控制display属性）单独使用ngIfimport { Component, OnInit } from '@angular/core';@Component({ selector: 'app

Angular10教程--2.3 双向绑定双向绑定大致可以分成两种类型：一、普通组件的双向绑定二、表单中的双向绑定[(ngModel)]单独使用表单元素在标签中使用总结：前面我们了解了属性绑定、事件绑定以及输入和输出的使用，是时候了解双向绑定了。本节，我们将利用@Input()和@Output()来了解下双向绑定。定义：双向绑定为应用中的组件提供了一种共享数据的方式。使用双向绑定绑定来侦听事件并在父组件和子组件之间同步更新值。(其实，也就是对@Input()跟@Output()的一种简化)双向绑定

前面，我们介绍了基本的属性绑定这些基础，这一节我们将介绍如何使用ng命令生成一个组件，并且还将介绍组件之间的相互属性传值。原文阅读ng命令生成组件在angular中，通过ngCli生成组件其实是一件很简单的事情。当然，我们直接复制已有的组件，再修改文件名，也是可以的。但是，这样做不会自动引入我们所创建的新组建。所以，ng命令是我们创建组件的首选。接下来，我们将在src/app/components/创建一个dialog组件。/** * 语法： * ng generate component.

这一节，我们主要讲angular的模版表达式，以及属性、class、style、事件的绑定～原文阅读插值与模板表达式所谓 “插值” ，就是指将表达式嵌入到标记文本中。 默认情况下，插值会用双花括号 {{ }}作为分隔符。（跟vue一致）可以有如下几种情况：//src/app/app.component.ts...export class AppComponent { title = 'Tour of Heroes'; myHero = 'Windstorm'; itemImag.

上一篇我们已经配置好了angular本地的开发环境。作为Angular10教程，在我的理解中，angular相较于VUE，它的模块化做得更好，这样使代码结构显得更清晰。所以本节，我们将简单介绍下angular语法，对ngModule的理解。（原文查看）首先，什么是angular module（ngModule）?我的理解：其实就是被@NgModule所装饰的普通的类，没有什么特别的。那么问题来了，什么又是@NgModule呢？先来看看src/app/app.module.ts里默认代码：i.

从这篇文章开始，我将在这里记录学习angular10的全部过程。这是一条艰辛的路，希望我能坚持走下去～(原文查看)1.安装全局ANGULAR CLInpm install -g @angular/cli@10 // windowssudo npm install -g @angular/cli@10 // macOS安装成功后执行ng --version，出现下图则表示安装成功2.创建项目确定一个你项目需要安装的目录，用终端打开文件夹，执行ng new hero（hero是你的项目名.