qrcode

马上订阅,开启修仙之旅

Angular 动态创建组件

本文我们将介绍在 Angular 中如何动态创建组件。 定义 AlertComponent 组件首先,我们先来定义一个 AlertComponent 组件: 123456789101112import { Component, EventEmitter, Input, Output } from '@angular/core';@Component({ sel...

Angular ng-template vs ng-container

通常情况下,当我们使用结构指令时,我们需要添加额外的标签来封装内容,如使用 *ngIf 指令: 12345678<section *ngIf="show"> <div> <h2>Div one</h2> </div> <div> <h2>Div two</h2> </div>&...

Angular 组件样式

ngClass通常情况下,要为某个元素添加指定样式,我们可以直接这样做: 1<button class="btn btn-primary">提交</button> 但某些时候我们需要根据不同的条件,为指定元素应用不同的样式。对于这种场景,我们可以使用属性绑定,如: 123<button class="btn" [class.btn-primary]="true"...

Angular 依赖注入简介

Angular 依赖注入简介

在介绍依赖注入的概念和作用前,我们先来看个例子。各位同学请睁大眼睛,我要开始 “闭门造车” 了。 一辆车内部构造很复杂,出于简单考虑,我们就只考虑三个部分:车身、车门和引擎。 现在我们来分别定义各个部分: 定义车身类 1export default class Body { } 定义车门类 1export default class Doors { &#...

Angular 自定义属性指令

本文将使用 UltimateAngular/angular-pro-src 中的示例,来一步步介绍自定义属性指令的相关知识。在正式开发前,我们可以先看一下,最终效果 Stackblitz - Custom-Attribute-Directive。 该示例中定义了两个自定义指令: CreditCardDirective —— 信用卡指令,用于对输入的 16 位信用卡号码,格式化显示(每 4 ...

Angular 6.x 快速入门

目录 第一节 - Angular 环境搭建 第二节 - 插值表达式 第三节 - 自定义组件 第四节 - 常用指令简介 第五节 - 事件绑定 第六节 - 表单模块简介 第七节 - Http 模块简介 第八节 - 注入服务 第九节 - 路由模块简介 第一节 - Angular 环境搭建基础要求 Node.js Git Angular 开发环境 安装 Angular CLI (可选) 1$ ...

Angular 内容投影

Angular 内容投影

在介绍 content projection 之前,我们先来观察一下以下的表单。对于同一个系统来说,下面的两个表单的区别在于使用不同的标题。为了提高组件的复用性,我们可以把相同的部分抽成独立的组件,然后把不同的部分单独出来。 这虽然可以解决问题,但能够进一步提高组件的复用性么?即让用户能够灵活设置标题。答案是可以的,在 Angular 中引入了内容投影的概念,即通过使用 <ng-co...

Angular Pipe 快速入门

Angular 中 Pipe(管道) 与 Angular 1.x 中的 filter(过滤器)的作用的是一样的。它们都是用来对输入的数据进行处理,如大小写转换、数值和日期格式化等。 内建管道及分类 String -> String UpperCasePipe LowerCasePipe TitleCasePipe Number -> String DecimalPipe Pe...

Angular 6.x 表单快速入门

目录 第一节 - 创建最简单的输入框 第二节 - 添加简单的验证功能 第三节 - 显示验证失败的错误信息 第四节 - 创建表单 第五节 - ngModelGroup简介 第六节 - 表单添加验证状态样式 第七节 - 表单控件的状态 第八节 - 使用单选控件 第九节 - 使用多选控件 阅读须知本教程的开发环境及开发语言: Angular 6.x Angular CLI TypeScript...

Angular DOM 抽象概述

为了能够支持跨平台,Angular 通过抽象层封装了不同平台的差异,统一了 API 接口。如定义了抽象类 Renderer2 、抽象类 RootRenderer 等。此外还定义了以下引用类型:ElementRef、TemplateRef、ViewRef 、ComponentRef 和 ViewContainerRef 等。 ElementRef在日常工作中,Web 工程师经常需要跟 DOM ...