ng --version

此版本angular-cli版本是9.1.6，更新最新版本

npm uninstall -g @angular/cli  // 老版本是写npm uninstall -g angular-cli
npm cache clean -f
npm install -g @angular/cli@latest

☆ 模块化：是从代码逻辑的角度进行划分；方便代码分层开发，保证每个功能模块的职能单一；
☆ 组件化：是从UI界面的角度进行划分，前端的组件化，方便UI组件的重用

☆ Angular工程属于模块化开发的思想，angular内也有组件（component），模块（module）是最小化单元。
☆ Vue则属于组件化开发，组件化是Vue的精髓,Vue就是由一个一个的组件构成的

elementRef

定义：对视图中某个原生元素的包装器。
Angular工程访问dom节点可以使用原生方法或者安装jquery方便的进行dom操作。不过angular自身是有访问dom的api，就是elementRef。不支持直接操作dom。

import { Component, ElementRef } from '@angular/core';@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.less']
})
export class AppComponent {title = 'angular-test';constructor(private elementRef: ElementRef) {let targetDiv = this.elementRef;console.log(targetDiv);console.log(targetDiv.nativeElement.getElementsByClassName('test'));}
}

Angular父子组件 & ng-content使用

ng-content有点类似于< router-outlet >，充当占位符的角色，不过更类似于vue的<slot></slot>，在组件间交互使用时规定内容的预期位置。

例如：
demo-one组件：

// demo-one component.ts@Component({selector: 'app-demo-one',templateUrl: './demo-one.component.html',styleUrls: ['./demo-one.component.less']
})

// demo-one html
<p>demo-one works!</p>
<p>--start--</p>
<ng-content></ng-content>
<p>--end--</p>

app.component使用demo-one组件：

<button (click)="btnClick()">按钮</button>
<app-demo-one><p>这是app的内容</p>
</app-demo-one>

ng-content由上述案例可知，其用于被引入的组件中，决定外部插入的内容的位置。
外部组件通过子组件的selector选择器名称引用子组件。