angular4.txt

（1） 用cli创建项目：

npm install @angular/cli -g

ng new 项目名 --routing --style=scss    //自动生成带有路由配置的项目并且使用scss

进入项目

ng serve --prod --aot   //能加快打开速度







（2）以后会考虑将前端代码（client）和后端代码（server）放在一个文件夹中，然后将其提交到github远端仓库上，在这儿使用@angular/cli创建后，已经生成了本地
git仓库，如果前后端代码放在一个文件中就不需要该本地仓库了（删除.git, .gitignore），要在该文件夹下进行git init操作，并配置.gitignore文件，以过滤不需要提交的文件







（3） Angular 2 HostListener & HostBinding     ------  https://segmentfault.com/a/1190000008878888   这两个属性装饰可以用在指令和组件中





（4）单选按钮的绑定方式：

baseLayerType = 'street';

<input name="baseLayerType" type="radio" [(ngModel)]="baseLayerType" (ngModelChange)="baseLayerControl($event)" value="moon" />
<input name="baseLayerType" type="radio" [(ngModel)]="baseLayerType" (ngModelChange)="baseLayerControl($event)" value="street" />

当点击选中时baseLayerType 会与当前选中的radio的value相等，在这儿默认选中第二个radio








（5）Angular 2 ViewChild & ViewChildren     https://segmentfault.com/a/1190000008695459    https://www.cnblogs.com/yw0219/p/7788633.html


@ViewChild(ChildComponent) public child: ChildComponent;  //获取子组件的实例


@ViewChild('greet') private greetDiv: ElementRef;  //获取组件中的元素，greet是模板引用变量    例： <div #greet></div>

@ViewChild('tpl', { read: ViewContainerRef }) tplVcRef: ViewContainerRef;   //

别的使用方式略......

@ViewChildren




（6） 当在form表单中使用[(ngModel)]时，必须要定义name属性

因为在内部，Angular 表单用它注册控件，Angular 创建了一些FormControl，并把它们注册到NgForm指令，再将该指令附加到<form>标签。 注册每个FormControl时，使用name属性值作为键值。


（6）EmbeddedViewRef， TemplateRef， ViewContainerRef

微语法在ng-template上的使用：    <ng-template ngFor let-item [ngForOf]="items"></ng-template>

相关文章：https://www.kancloud.cn/wujie520303/angular2_note/262955





















（7）  菜单导航示例：

toggleMenu = {
    
	list: [
      
		{
        name: '基本信息'
      },
     
		{
        name: '权限分配'
      }
    
	       ],
    
	index: 0
  
};

 <div class="toggle-menu">
       
 	<div *ngFor="let item of toggleMenu.list; let i=index" class="item" [class.active]="i==toggleMenu.index" (click)="toggleMenu.index=i">{{item.name}}</div>
   
 </div>
<section [class.d-none]="toggleMenu.index != 0">xxxxxxx</section>
<section [class.d-none]="toggleMenu.index != 1">xxxxxxx</section>




（8）angular5 Custom Validators   表单自定义验证

  参考文章：    https://codecraft.tv/courses/angular/advanced-topics/basic-custom-validators/


（9）angular5 Custom Async Validators 表单自定义异步验证

  参考文章：    https://alligator.io/angular/async-validators/



（10）angular5 animation

参考文章：https://www.cnblogs.com/flxy-1028/p/8012919.html






（11）掌握<ng-content></ng-content>的用法
参考文章: https://segmentfault.com/a/1190000010730597






（12）angular 组件继承和模板交换

参考文章：https://coryrylan.com/blog/angular-component-inheritance-and-template-swapping






（12）在组件上实现数据的双向绑定

例如：<app-component [(attrName)]="variable"></app-component>

在NG-ZORRO中的nz-switch组件中可用ngModel实现双向数据绑定，回头看看源码时怎么实现的，代码使用如下：

<nz-switch [(ngModel)]="switchValue"></nz-switch>





（13）CSS 标准中用于 "刺穿 Shadow DOM" 的组合器已经被废弃，并将这个特性从主流浏览器和工具中移除。 
因此，我们也将在 Angular 中移除对它们的支持（包括 /deep/、>>> 和 ::ng-deep）。 
目前，建议先统一使用 ::ng-deep，以便兼容将来的工具。









(14) @HostListener和@HostBinding的两种使用方式：用于给宿主元素绑定事件和属性

import { Directive, ElementRef, HostListener, Input, Renderer2, OnInit, OnDestroy, AfterViewInit } from '@angular/core';

@Directive({
    selector: '[myDragElement]',
    host: {
        //方式一
        '[style.color]': 'color',  //与HostBinding('style.color') color = '#fff';是等价的
        // 方式一
        '(click)': 'onClick($event.target)'  //与@HostListener('click', ['$event.target']) onMouseUp(target) {}是等价的
    }
})
export class DragElementDirective {

    // @Input('myDragElement') Options: Options;  //给指令名指定别名为Options（更容易阅读 ）

    color = '#fff';

    constructor(
        private el: ElementRef,  //宿主 DOM 元素
        private renderer2: Renderer2
    ) { }

    ngOnInit() { }

    ngAfterViewInit() {}

    ngOnDestroy() {}

    // 方式二
    @HostBinding('class.pressed') isPressed: boolean;

    other = 'other'
    // 方式二
    // HostListener的第二个参数表示向监听的回调函数(onMouseDown)中传递的参数数组
    @HostListener('mousedown', ['$event', 'other']) onMouseDown(event, other) {
        console.log(event);
        console.log(other);
    }

    @HostListener('document:click', ['$event']) onClick(event) {
        console.log(event);
        console.log(other);
    }


}