创建项目：

每个组件里有三种类型的文件：

app.component.ts— 组件的类代码，这是用 TypeScript 写的。 app.component.html— 组件的模板，这是用 HTML 写的。 app.component.css— 组件的私有 CSS 样式。

ts文件里定义数据，属性
html就是模板，也是直接写div就是了，不需要写什么doctype，在HTML里使用数据和Vue差不多，都是用{{}}来获取到。

1：英雄编辑器

@Component

每个组件的ts文件中都有@Component，用来给组件指定它所需要的数据。

selector— 组件的选择器（CSS 元素选择器） templateUrl— 组件模板文件的位置。 styleUrls— 组件私有 CSS 样式表文件的位置。

selector设置的就是你这个组件在父组件的HTML中用什么名字标签表示。比如：

//假设在一个组件里
@Component({selector: 'app-root',   templateUrl: './app.component.html',   styleUrls: ['./app.component.scss'] })

//那么你这个组件在父组件中展现时就是用这个表现方式 
<app-root> </app-root>

生命周期

ngOnInit() 就有点像Vue里的created() 的功能

全局类：

可定义 src/app/xxx.ts这样的文件，然后在这个文件中定义全局会用到的属性类型，比如
export interface Hero { id: number; name: string; } //其它组件如果想定义这种类型的数据，那就 hero:Hero={ id:1, name:’LeiO’ } //这个数据在HTML里使用就是 {{hero.id}} {{hero.name}}

双向绑定：

//实现数据的双向流动，从hero.name流动到input上，input修改后又回流到hero.name

上面要这样导入是因为，Angular需要知道该应用需要哪些其它文件和库。
写到@Component上的会加到组件类上，也就是只会影响到你当前这个组件，不影响其它组件，关键的元数据就需要写到@NgModule上。（个人感觉那些会全局用到的就需要加到NgModule上）

项目中各文件功能

创建组件的命令 ng g component xxxx表你想创建的组件所在的目录，这个目录就在app下。得到所示效果

声明属性的几种方法

public xx=''
xx ='' 
// 这两者是同样的功能，定义变量时如果不写，那就默认是public
//在ts中给变量设置类型的方法
student:string='123'

动态传值

给属性动态的传值时，需要[]

// ts中
public test='gg';
//html中
<div [title]='test'> </div> 
这就是将ts中变量test的值赋给了title属性

声明类型的方法

指令

ngFor的遍历

ngSwitch

感觉功能就跟之前的switch判断的功能差不多，都是根据当前值来判断要执行哪个代码

ngClass && ngStyle

这就是动态的设置样式，当对应类冒号右边的判断为true的时候，才加上

<li *ngFor="let item of list" [ngClass]="'red':item===1,'blue':item===2">  </li>
<!--ngStyle-->
<li [ngStyle]="{'color':'red'}">  </li>
//

[]表示属性绑定，() 表示绑定事件

有条件绑定类

//有条件的添加和删除CSS类，形式如下

• xxx

*ngIf

//跟v-if也差不多，也是当所接为true时才展示内容

管道

从解释来看，管道就像是一个数据格式化的功能，比如有时你在调试代码的时候想让对象数据展示在页面上，如果你写成{{test}} 那就发现在界面上展示的{Object} ，它并没有展示具体内容

<div>{{data | json }} </div>  //表示把数据data以json格式展示出来,这样就能展示具体内容了

图片展示的两种方法

//假如是本地存的图片
<img src='assets/img/01.png alt=''/>   //也即把图片对应的相对或绝对路径写到src中
// 倘若是图片链接
<img [src]='imgLink' alt=''/>  // 即用[] 这种属性绑定的方式来赋值