1. 删除由Angular组件创建的Host HTML元素选择器
写一个remove-host 指令
//remove the host of avatar to be rendered as svg
@Directive({
selector: '[remove-host]'
})
class RemoveHost {
constructor(private el: ElementRef) {
}
//wait for the component to render completely
ngOnInit() {
var nativeElement: HTMLElement = this.el.nativeElement,
parentElement: HTMLElement = nativeElement.parentElement;
// move all children out of the element
while (nativeElement.firstChild) {
parentElement.insertBefore(nativeElement.firstChild, nativeElement);
}
// remove the empty element(the host)
parentElement.removeChild(nativeElement);
}
}
使用方式：`` 来自stackoverflow
2.判断<ng-content>为空
Wrap ng-content in an HTML element like a div to get a local reference to it, then bind the ngIfexpression to ref.childNodes.length == 0:
template: `<div #ref><ng-content></ng-content></div>
<span *ngIf="ref.childNodes.length == 0">
Display this if ng-content is empty!
</span>`
进一步阅读和参考
Angular
- Angular.io API Reference - Angular 2 Reference Material with easy access to different Angular 2 items
- Angular Style Guide - Opinions from the Angular 2 tea
- Angular Module Github - Source code is written in readable TypeScript
- Angular Material Github - Official repo for Angular 2 implementation in material design
TypeScript
- tsconfig options - information on how to configure the TypeScript compiler
- TypeScript Playground - In-browser TypeScript editor with live reload
- TypeScript Handbook
- TypeScript Deep Dive - Additional learning material
General Coding Practice and Functional Programming
RxJS, Reactive Programming and Observables
Observables are known for having a steep learning curve due to the fact that it requires a different way of thinking. Here are some helpful topics about working with and understanding reactive programming using the observable model.
- RxJS 5 Observables Reference - Reference material on RxJS 5 Observables. There are many breaking changes from RxJS 4-> 5 so please use documentation on version 5.
- RxMarbles - Quick references for visualizing observable value fulfillment through the use of marble diagrams
- How to debug RxJS code - Blog post explaining how to read and use marble diagrams
- RxJS 5 Thinking Reactively - Talk from RxJS 5 product lead on how to approach development using RxJS 5
- Learn RxJS - Example driven guide to RxJS
Redux and ngrx
- A comprehensive guide to ngrx
- ng2-redux Github
- ngrx Github - Includes links to ngrx scoped libraries including: store, effects, router
- Redux Documentation
Keeping up to date
- Angular 2 Weekly Notes
- Angular blog - Includes blog posts for Angular 1.x
- Angular Air - Angular podcast
- Adventures in Angular - Angular podcast
- Angular 2 Changelog - Technical Changelog
Other
下一节：拦截 zone 事件是棘手的，因为 zone 是在运行时生成的，并且标准方法（如子类化和猴子补丁）只有在设计时已知父 zone时才起作用。 为了更好地演示这个问题，我们假设想在run()方法的前后进行拦截，这样我们可以测量执行时间和在控制台记录 zone。