Angular开发小笔记
一、父组件怎么覆盖子组件的样式呢
1./deep/(不建议这么做,以后angular会取消,因为这样写不利于组件的独立性)
在父组件的scss里面写:
:host{
子组件名 /deep/ label{
color:red
}
}
这样就可以覆盖掉子组件label的color了
2.host和host-context
在子组件的scss里面写:
:host(.自身加的class){
label{
color:red;
}
}
或者
:host-context(父组件名){
label{
color:red;
}
}
网上查到的定义:
:host(selector) { ... }
forselector
to match attributes, classes, ... on the host element:host-context(selector) { ... }
forselector
to match elements, classes, ...on parent
二、Unit Test for Service
有两个方法,但是其实都是大同小异,都需要inject来生成实例,和mockBackend来模拟http返回data
方法一:注入要测试的service和MockBackend,并得到其实例
import { MockBackend } from '@angular/http/testing';
import { TestBed, inject } from '@angular/core/testing';
import { TestService } from './test.service';
import { Response, ResponseOptions } from '@angular/http'; describe("test.service", () => {
let testService:any;
let backend:any;
beforeEach(() => {
TestBed.configureTestingModule({
providers: [TestService, MockBackend]
});
})
//inject注入要测试的service和mockbackend(模拟http返回数据),后面注入function拿到对应实例
beforeEach(inject([TestService, MockBackend], (testService, mockBackend) => {
this.testService = testService;
this.backend = mockBackend;
}))
it('test a service', () => {
let MOCKDATA = {
//一些模拟数据...
}
this.backend.connections.subscribe((connection) => {
connection.mockRespond(new Response(new ResponseOptions({
body: JSON.stringify(MOCKDATA)
})));
});
this.testService.getData('一些api需要的数据').subscribe((res) => {
expect(res.length).toEqual(10);
});
})
})
方法二:自己重写一个http,mockData传到自己重写的http上,前提是service调用了自己重写的http方法
describe("test.service", () => {
let testService:any;
beforeEach(() => {
let mockData = new ResponseOptions({
body: JSON.stringify({
//MockData
})
});
let cshttpServiceStub: any = {
get: function () {
return Observable.create(observer => {
observer.next((new Response(mockData)));
observer.complete();
})
}
}
TestBed.configureTestingModule({
providers: [
TestService,
{ provide: CshttpService, useValue: cshttpServiceStub }
]
});
})
//还是需要inject,才能在不调用component请款下创建service实例
beforeEach(inject([TestService], (testService) => {
this.testService = testService;
})) it('test a service', () => {
this.testService.getData('一些api需要的数据').subscribe((res) => {
expect(res.length).toEqual(10);
});
})
})
三、面对没有值的html属性,怎么办?
例如input的disabled,video和audio的autoplay、loop,ol的reversed.....
这些属性都是只要存在于标签上就会有所影响:
例如:
<video autoplay src="1.mp4"></video>
<video autoplay="false" src="1.mp4"></video>
无论给autoplay什么值都好,甚至给它false都好,这个video还是会自动播放,这个时候Angular提供了比较方便的方法去实现动态判断是否留下这样属性的方法
大致有2个方法:
方法1:中括号输入法
<video [autoplay]="false" src="1.mp4"></video>
把autoplay用中括号包住,如果是false,Angular就会自动把它去除掉,编译出来就变成
<video src="1.mp4"></video>
方法2:中括号attr输入法
<video [attr.autoplay]="true" src="1.mp4"></video>
<video [attr.autoplay]="null" src="1.mp4"></video>
attr.属性和中括号输入法差不多,不同的是false的时候不能输入false,因为attr.属性会把输入的值原封不动地输入去,编译成下面这样:
<video autoplay="false" src="1.mp4"></video>
而输入null则可以实现和括号输入法输入false时一样的效果。
四、常用的Angular内置的指令
指令 | 例子 |
ngIf | *ngIf="true" |
ngFor | *ngFor="let btn of btns" |
ngClass | [ngClass]="{'info':true}" |
ngModel | [(ngModel)] = "person.name" |
ngModelChange |
(ngModelChange)="onChange($event)"
|
ngSubmit | (ngSubmit) = "onSubmit($event)" |

Angular开发小笔记的更多相关文章
- Angular 开发小妙招1:提交表单数据验证不通过,更改输入组件的样式
开发表单时,客户端数据完整性校验是必不可少的,在jquery 时代出现了无数的数据验证插件也很好用,开发Angular 应用时,angular 内置了一些常用的数据验证指令.今天要讲的不是这些指令如何 ...
- PIE 插件式开发小笔记__PIESDK学习体会
基于PIE.NET-SDK插件式二次开发文档笔记: PIE 插件式开发配置文件: 它里面一行如下: 理解上一行'Item'关系-> library:为插件类名(程序集名称+后缀 ...
- WEEX-EROS开发小笔记
本文是作者之前刚接触移动端跨平台开发,使用weex-eros开发项目平日里记下来的一些笔记,分享出来方便为新手解惑,weex-eros是weex的一套解决方法,使用vue语法糖,对于前端开发者来说可以 ...
- android studio开发小笔记1
1.点击空白处隐藏软键盘 /* 隐藏软键盘 * */ public boolean dispatchTouchEvent(MotionEvent ev) { if (ev.getAction() == ...
- 转:【iOS开发每日小笔记(十一)】iOS8更新留下的“坑” NSAttributedString设置下划线 NSUnderlineStyleAttributeName 属性必须为NSNumber
http://www.bubuko.com/infodetail-382485.html 标签:des class style 代码 html 使用 问题 文件 数据 ...
- 《C++游戏开发》笔记十一 平滑动画:不再颤抖的小雪花
本系列文章由七十一雾央编写,转载请注明出处. http://blog.csdn.net/u011371356/article/details/9430645 作者:七十一雾央 新浪微博:http:/ ...
- 【前端】移动端Web开发学习笔记【1】
下一篇:移动端Web开发学习笔记[2] Part 1: 两篇重要的博客 有两篇翻译过来的博客值得一看: 两个viewport的故事(第一部分) 两个viewport的故事(第二部分) 这两篇博客探讨了 ...
- Rest API 开发 学习笔记(转)
Rest API 开发 学习笔记 概述 REST 从资源的角度来观察整个网络,分布在各处的资源由URI确定,而客户端的应用通过URI来获取资源的表示方式.获得这些表徵致使这些应用程序转变了其状态.随着 ...
- 《MFC游戏开发》笔记十 游戏中的碰撞检测进阶:地图类型&障碍物判定
本系列文章由七十一雾央编写,转载请注明出处. http://blog.csdn.net/u011371356/article/details/9394465 作者:七十一雾央 新浪微博:http:// ...
随机推荐
- Linux内核分析——Linux内核学习总结
马悦+原创作品转载请注明出处+<Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 Linux内核学习总结 一 ...
- article元素以及section
<p>发表日期:<time pubdate="pubdate">2015/10/30</time></p> article元素有自己 ...
- js异步回调
简单理解:js是单线程的,Ajax请求远程数据.IO等会很耗时,引起堵塞可能会引起反应时间太长页面失去反应. 回调:A函数作为一个参数传给B函数,执行完B后再执行A: 同步回调: function A ...
- <面向对象程序设计>课程作业一
Github链接 在看完这次的作业要求后我整个人是混乱的,因为作业要求把不同的函数放在一个main函数中:我们之前也是进行了函数分离,但是是放在了不同的文件中.如果要改的话相当于重写(而且这两种形式其 ...
- the confilict between validation and readonly in jquery
How can I disable jquery validation on readonly fields? http://stackoverflow.com/questions/10803294/ ...
- [转帖] 从零开始编写自己的C#框架(27)——什么是开发框架
从零开始编写自己的C#框架(27)——什么是开发框架 http://www.cnblogs.com/EmptyFS/p/4105713.html 没写过代码 一直不清楚 框架的含义 不过看了一遍 也没 ...
- [日常工作]GS使用消息队列进行凭证实时记账 提高性能配置方法
1. 安装消息队列服务 使用平台技术部的一键安装工具,安装. 自带jdk以及activeMQ 自动注册服务. 比较方便. 2. 修改/gsp/config下面的MQ配置文件,将消息队列服务修改为当前虚 ...
- NAT模式下VMware中CentOS7无法连接外网的解决方法
故障现象 ----------------------------------------------------------------------------------------------- ...
- 洛谷 P1392 取数
题面 在做这道题前,先要会他的弱化版(实际一模一样,只是愚蠢的洛谷评测级别差了一档(睿智如姬无夜)) ----------------------------------弱化版------------ ...
- BZOJ1915[USACO 2010 Open Gold 1.Cow Hopscotch]——DP+斜率优化
题目描述 奶牛们正在回味童年,玩一个类似跳格子的游戏,在这个游戏里,奶牛们在草地上画了一行N个格子,(3 <=N <= 250,000),编号为1..N.就像任何一个好游戏一样,这样的跳格 ...