一、父组件怎么覆盖子组件的样式呢

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) { ... } for selector to match attributes, classes, ... on the host element
  • :host-context(selector) { ... } for selector 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里面HTML时间都是以小括号括住实现的,例如(click)="onClick($event)",注意这里$event是不能乱改的,Angular会自动识别并且注入对应的东西
在这里就会有一个疑问,就是(change)="change($event)"和(ngModelChange)="change($event)"的区别是什么呢?
 
(change)="change($event)" 是每次input完失去焦点才会触发,$event传回来的是一个对象:(target和srcElement就是触发事件的对象)
Angular开发小笔记-LMLPHP
 
(ngModelChange)="change($event)",就是每输入一个字符就会触发一次,$event返回的是这个元素绑定的ngModel
 
(ngSubmit)="onSubmit($event)"只会在提交表单时候触发,$event传回来的是一个对象和(change)返回的差不多的对象
04-28 16:46