Angular
https://angular.cn/
小火车况且况且
这个作者很懒,什么都没留下…
展开
-
Angular插槽的使用
Angular插槽的使用使用ng-content 主要借助于select如果什么都不填直接使用<ng-content></ng-content>,就会显示父组件传递的默认的内容<ng-content select='.child'></ng-content>使用的是类名选择器<ng-content select='[name=child]'></ng-content>使用的是属性选择器子组件 child<div&g原创 2020-12-01 18:47:08 · 795 阅读 · 0 评论 -
Angular10+ NG-ZORRO10实现的一次登录校验功能
Angular10+ NG-ZORRO10实现的一次登录校验功能说明: 响应式表单使用显式的、不可变的方式,管理表单在特定的时间点上的状态。对表单状态的每一次变更都会返回一个新的状态,这样可以在变化时维护模型的整体性。响应式表单是围绕 Observable 流构建的,表单的输入和值都是通过这些输入值组成的流来提供的,它可以同步访问。在根目录(app.module.ts)首先导入import { ReactiveFormsModule } from '@angular/forms'注册响应式表单模块,原创 2020-11-03 09:40:22 · 1586 阅读 · 0 评论 -
Angular10中的特性模板和根模板(AppModule)
前提是安装了 Angular cli,以下的大部分文件创建都是依赖于cli提供的指令Angular中的特性模板和根模板(AppModule)区别在于特性模板可以把应用划分,个人理解类似于组件化特性模板创建的指令ng g module article ,这里使用的是ng g module article --routing,可以生成一个article-routing.module.ts路由文件此时CLI会在app文件夹下再创建一个文件夹article,article文件夹下包含两个文件arti原创 2020-10-26 17:30:12 · 588 阅读 · 0 评论 -
Angular10 中class和style的绑定
Angular10中class和style的绑定1.class绑定绑定类型语法输入类型输入值范例单个类绑定[class.foo]=‘flag’boolean|undefined|nulltrue,false多个类绑定[class]=‘classExpr’string{[key:string]:boolean | undefined | null}Array < string>‘my-class1 my-class2’{foo: true, bar:原创 2020-07-20 15:50:06 · 539 阅读 · 0 评论 -
Angular10 数据绑定
Angular10数据绑定 中文官网地址绑定方式绑定类型语法分类举例插值、属性、attribute、css类、样式{{expression}}[target] = 'expression’bind-target=‘expression’单向从数据源到视图数据绑定{{title}}事件(target)='statement’on-target=‘statement’单向从视图到数据源的单向绑定点击事件(click)=‘handleClick’双向[(tar原创 2020-07-20 14:22:57 · 366 阅读 · 0 评论 -
Angular的生命周期函数
Angular的生命周期函数中文官网地址对于生命周期的说明生命周期函数触发时机ngOnChanges设置或重新设置数据绑定的输入属性时响应ngOnInit (只执行一次)第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件ngDoCheck检测,并在发生 Angular 无法或不愿意自己检测的变化时作出反应ngAfterContentInit(只执行一次)当 Angular 把外部内容投影进组件视图或指令所在的视图之后调用ngAfterC原创 2020-07-18 22:15:25 · 311 阅读 · 0 评论 -
Angular10 中配置@路径别名
Angular10中配置@路径别名Angular10中的项目文件结构 中文网站Angular10中的tsconfig配置被分成了四个文件tsconfig.json工作空间中各项目的默认TSP配置tsconfig.base.json工作空间的所有项目使用的基础TS配置,所有其它的配置文件都是继承自这个基础文件tsconfig.app.json应用专属的TS配置包括TS和Angular模板编译器的选项tsconfig.spec.json应用测试的TS配置主要配置是在tsconfig.base原创 2020-07-17 15:59:04 · 1081 阅读 · 0 评论 -
Angular-cli 的常用指令
Angular-cli常用的指令1. 创建模板ng g component模板名称ng g component test会直接生成在 app文件夹下面,出现test文件夹,包含四个文件分别是以.ts``.html``.css``.spec.ts结尾的文件 也可以指定存放的目录ng g component views/test,会在app文件夹下面先生成views文件夹,再生成test文件夹,最后就会生成四个文件...原创 2020-07-17 11:11:36 · 256 阅读 · 0 评论 -
Angular中父子组件传值
Angular中父子组件传值1. 父组件给子组件传值说明: 父组件给子组件传值的时候,父组件中在子组件的选择器上绑定数据即可<app-hero-child [transData]='tran_childData'></app-hero-child>子组件接收的时候需要引入input模块import { Component, OnInit, Input} from '@angular/core'子组件还需要使用语法糖的形式接收父组件传递的参数@input() transDat原创 2020-07-15 21:57:12 · 738 阅读 · 1 评论