随笔分类 -  angular

angular 循环多组radio时，获取各自的value值
摘要：ngModel 绑定了一个字符串导致循环出来的多组radio，同时选中某一个 <div *ngFor="let item of list，let i = index"> <nz-radio-group nzName="{{item.id}}" [(ngModel)]="radioValue"> <l 阅读全文
posted @ 2020-01-10 13:29 砂糖一椰子 阅读(1996) 评论(0) 推荐(0)
angular 在formGroup中失效报错 ngModel cannot be used to register form controls with a parent formGroup directive
摘要：错误原因：在最外层的form中使用了 formGroup 指令，但在下面的某个input 元素中，使用了ngModel 指令，但没有加入formControl 指令或 formControlName 属性。 解决方法一 在input元素中添加 formControl 指令或 formControlN 阅读全文
posted @ 2020-01-02 20:50 砂糖一椰子 阅读(3409) 评论(0) 推荐(0)
angular 声明属性的几种方式
摘要：public 共有 （默认） 可以在当前类中使用，也可以在类外使用 protected 保护类型 它只有在当前类和它的子类里可以访问 private 私有 只有在当前类才可以访问这个属性 public title = '我是一个组件'; msg = '我是组件的msg'; private usern 阅读全文
posted @ 2019-12-24 15:20 砂糖一椰子 阅读(877) 评论(0) 推荐(0)
angular 装饰器（注解）
摘要：装饰器/注解 就是一个函数 但它是一个返回函数的函数 它是TypeScript 的一个特性，而非Angular 的特性 @Emoji() result = 'Hello'; export function Emoji() { return (target: object, key: string) 阅读全文
posted @ 2019-12-16 20:10 砂糖一椰子 阅读(1044) 评论(0) 推荐(0)
angular 模块 NgModule（chrome插件--Augury）
摘要： 阅读全文
posted @ 2019-12-09 19:32 砂糖一椰子 阅读(345) 评论(0) 推荐(0)
angular 双向绑定
摘要：<input [value]="username" (input) = "username = $event.target.value" [value] = "username" -- 绑定 username 值到 input 的value （input）= “表达式” --绑定表达式到input  阅读全文
posted @ 2019-12-09 13:07 砂糖一椰子 阅读(1282) 评论(0) 推荐(0)
angular 模板引用
摘要：模板在组件类中的引用（单个） 使用引用名 2. 使用组件类型 引用多个模板元素 @ViewChild 总结 @ViewChild 用来在类中引用模板中的视图节点 可以是 Angular 组件，也可以是HTML元素 在AfterViewInit 中可以安全的使用 @ViewChild 引用的元素 推荐 阅读全文
posted @ 2019-12-07 11:18 砂糖一椰子 阅读(606) 评论(0) 推荐(0)
angular 组件的生命周期
摘要：import { Component, OnInit, Input, Output, EventEmitter, SimpleChanges, OnChanges, AfterContentInit, AfterContentChecked, AfterViewChecked, AfterViewI 阅读全文
posted @ 2019-12-05 20:13 砂糖一椰子 阅读(644) 评论(0) 推荐(0)
angular 样式绑定的几种方式
摘要：class.className 直观，适合单一class的显示和隐藏 ngClass 非常灵活 ， 可以同时操作几个类的改变 true为显示，false为失效 ngStyle 适合特殊需求，不需要class 子组件HTML<ul [ngStyle]="{'background-color':back 阅读全文
posted @ 2019-12-05 16:32 砂糖一椰子 阅读(606) 评论(0) 推荐(0)
angular ngIf指令 以及组件的输入输出
摘要：ngIf 指令 <span *ngIf="i selectedIndex" class="botStyle"></span> 组件的输入输出 子组件： import { Component, OnInit, Input, Output, EventEmitter } from '@angular/c 阅读全文
posted @ 2019-12-05 14:56 砂糖一椰子 阅读(677) 评论(0) 推荐(0)
angular 命令行指令总结
摘要：npm install -g @angular/cli //安装angular脚手架 ng version 出现版本信息即安装成功。 ng new 项目名称 在终端中，进入想要创建项目的地址执行 ng serve 启动项目 ng g c components/nav 在定义的components路径 阅读全文
posted @ 2019-12-04 20:30 砂糖一椰子 阅读(484) 评论(0) 推荐(0)
angular8.x 事件的处理和样式绑定
摘要：<a href="#" [class.active]="i selectedIndex" （click）="selectedIndex i"> {{ menu.title }}</a> [class.样式名]="判断表达式" 是在应用单个class时的常用技巧 使用 方括号[ ]是数据绑定，如果带方 阅读全文
posted @ 2019-12-03 09:59 砂糖一椰子 阅读(503) 评论(0) 推荐(0)
angular重要指令 ngFor
摘要：1变量应用范围 包含ngFor的元素及内部元素 2 索引的获取 let i = index; 3第一个元素和最后一个元素 let first = first; let last = last； 4 奇和偶 let odd = odd；let even = even 5提升性能 trackBy：tra 阅读全文
posted @ 2019-11-29 18:31 砂糖一椰子 阅读(3246) 评论(0) 推荐(0)