angular @input和@output

flex布局有两个方向，根据排布方向主轴会变，设置flex布局 它只影响盒子中第一层元素的布局，只影响到直接的子元素

angular真机调试方式

1.手机和电脑连接同一wife
2. ng serve --host 0.0.0.0
3. 手机打开域名

父元素设定 display：flex
flex-direction ：colum 竖着排列 rows 横着拍 colum-revrse 倒序
write-space：nowrap 避免折行

ngfor重复指令

<div *ngfor = "let a of b;let first = first ;let i = index; let last = last;let odd= odd;let even = even"  trackyBy:trackElement><div>

可以获取索引，奇数个，偶数个第一个和最后一个 trackBy可以提升性能 可以返回一个表达式或者函数进行判断

时间的处理和样式绑定

表达式为真的时候就应用这个样式，表达式为假的时候就不应用这个样式

在 css中定义样式 然后在angular里进行绑定就行

ngIF指令

当某些表达式为真的时候显示某些内容 是模板的代码段 在条件为否的时候可以执行代码段
图的左边是经常适用的版本 图的右边是真正运行时候的版本

组件的输入输出

比如菜单 这个组件我们需要不同的数据去显示那么就给子组件设置一个 装饰器 ，外部组件通过@input输入进来
在子组件中定义装饰器
@input（）meanu （子组件中定义）
然后在调用组件时就可以用
<app-child [meanu]= “abc”>
就可以这样向里边传入数据了
设置属性交给外部去做，则可以增强组件的一个可复用性

子组件把把事件报告给上级（父组件）

@output（） tabSelected = new EventEmiter（） //事件发射器

列如在子组件中定义方法
handleSelected（index：number）{
this.selectedIndex = index;
this.tabSelected.emit(this.menus[this.selected]);
将this.menus 这个值发射出去
}

父组件就可以通过事件去监听这个事件的变化了
<app-child [meanu]= “abc” [tabSelected] = abc($event)>

在父组件中i在定义abc方法 就可以打印到子组件中的数据了 ，实现在父组件中监听子组件