type 类型别名 和interface 接口（ 对象可以做什么的 ）的区别
interface通过 继承来扩展 type通过&来扩展
接口可以（同名接口）自动合并，而类型别名不行
能用 interface 的地方就用 interface，否则用 type，其实这个解释官方说的也比较明确，这样使用的原因是因为更贴合 JavaScript 对象的工作方式，再清晰一些，如果我们是定义一个 object，那么最好是使用 interface 去做类型声明，什么时候用 type 呢，当定义一个 function 的时候，用 type 会更好一些：
OOP 的理念中，接口反映的是协议，它约束了一类相似的”东西“都应该具有的属性，毫无疑问，除非明确是 interface 的场景，否则都应该用 type，因为在大多数的场景下我们使用 interface 去定义了类型而非接口，当一个接口需要被实现的时候才可以被定义为 interface。
接口存在的意义是为了解耦
angular学习 colin3dmax的个人空间_哔哩哔哩_bilibili
app.moudel
app.module.ts是angular应用的根模块，它用来描述应用的各个部分如何组合在一起。每个应用至少有一个根模块，你可以用任何名字来命名它，但是习惯上叫做AppModule。app.module.ts中，你需要做以下几件事：
导入你要在应用中使用的外部模块，比如FormsModule或HttpClientModule，放在imports数组中。
声明你要在本模块中定义的组件，比如AppComponent或HeroFormComponent，放在declarations数组中。
提供你要在本模块中使用的服务或令牌，比如HeroService或LoggerService，放在providers数组中。
指定你要启动的根组件，通常是AppComponent，放在bootstrap数组中。
根组件 app
@component 装饰器
@component 里面的东西是组件的元数据，它包括以下几个属性：
selector：组件的选择器，用来在模板中标识组件。
templateUrl：组件的模板文件的路径，用来定义组件的视图。
styleUrls：组件的样式文件的路径，用来定义组件的外观。
inputs：组件的输入属性，用来从外部接收数据。
outputs：组件的输出属性，用来向外部发送事件。
providers：组件的依赖注入提供者，用来定义组件所需的服务或令牌。
viewProviders：组件的视图依赖注入提供者，用来定义组件视图所需的服务或令牌。
changeDetection：组件的变更检测策略，用来优化性能。
encapsulation：组件的样式封装模式，用来控制样式的作用域。
preserveWhitespaces：组件的空白保留选项，用来控制模板中的空白字符。
@input() hero：Hero 外部传入的（其他组件的） 自己内部就直接用 hero：Hero
oninit
初始化逻辑的地方
|格式化 eg： {{ | uppercase}}
双向绑定
【ngmodel】 默认是不可用的 需要导入模块
import {formsmoudel}
指令
*ngfor eg *ngfor="let hero of heros"
属性指令
ngclass 添加和删除一组 CSS 类
eg [class.seleted] ='hero===seletedHero'当hero===seletedHero为true 添加.eleted样式
ngstyle 添加和删除一组 HTML 样式
ngmodel 将双向数据绑定添加到 HTML 表单元素 v-model
属性表达式
[hidden]=‘isonchange’
<app-hero-detail [hero]='seleteHero'><app-hero-detail/> angular属性绑定语法 相当于vue的：属性是一种单项的数据绑定
ng命令
ng generate component hero 生成一个组件并且自动添加到model
ng generate service hero 创建一个service服务
服务
@injectable 接口分离的概念
路由
<router-outlet > < router-view>
<a router-link='/heros'>
仪表盘 cont routes：Routes ={
{path:'',redirectTo:'/dashboard',pathMatch:'full'}
}
语法
差值表达式 {{}}
组件中的seleter要与html中的对应类比 vue的components：
两者比对写法
vue:
<div v-html="newData.Contents"></div>
<div v-show="!isVisible"></div>
<div v-if="isVisible"></div>
<div :class="show"></div>
anuglar:
<div [innerHTML]="newData.Contents"></div>
<div [hidden]="!isVisible">This is visible</div>
<div *ngIf="isVisible">This is visible</div>
<div [class]="show"></div><div class={{show}}></div>
<div [class]>用于绑定一个或多个类名，类名可以是字符串或数组1。例如：<div [class]=“‘someClass’”>或<div [class]=“[‘someClass’, ‘anotherClass’]”>
<div [ngclass]>用于根据条件动态添加或移除类名，类名可以是对象或数组1。对象的键是类名，值是布尔表达式。例如：<div [ngclass]=“{‘someClass’: condition}”>或<div [ngclass]=“[‘someClass’, ‘anotherClass’]”>
<div [class]>和<div [ngclass]>可以同时使用，但是如果有冲突，<div [class]>会覆盖<div [ngclass]>的效果3。
模板输入变量 let hero of heros vue item in items
模板引用变量# 通常用来引用dom模板中的某个dom元素还可以引用angular组件或指令或web component vue的ref
事件对象 $event vue v-on参数
Vue中也有类似的$event对象，它也可以在事件绑定中使用，比如@keyup.enter=“$event.target.value.trim()”。你还可以使用键盘事件的修饰符，比如@keyup.page-down="onPageDown"5。如果你想验证一个组件发出的事件是否有效，你可以使用对象语法来定义事件，并为事件分配一个验证函数6。
ng指令
ng-app：定义Angular应用的根元素，自动初始化应用1。
ng-controller：添加控制器到应用，控制器可以包含方法，函数和变量2。
ng-model：绑定HTML元素的值到应用的数据模型1。
ng-bind：绑定或替换HTML元素的文本内容为表达式的值2。
ng-if：根据条件显示或隐藏HTML元素3。
ng-for：遍历数组或对象，并重复渲染HTML元素3。
ng-switch：根据表达式的值切换不同的HTML元素3。
ng-class：根据条件动态添加或移除类名3。
ng-style：根据条件动态添加或移除样式3。