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方法 就可以打印到子组件中的数据了 ,实现在父组件中监听子组件