一.循环 ngFor
//在html文件中
<div>{{title}}</div>
<ul>
<li *ngFor="let item of menus"><a href="#">{{ item.title }}</a></li>
</ul>
//在对应html文件的component.ts文件中
interface TopMenu {
title: string;
link: string;
}
//ts接口这部分我还没理解到位,以后理解了会回来补充的!
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = '这是第一个angular项目';
menus: TopMenu[] = [
{
title: '热门',
link: ''
},
{
title: '男装',
link: ''
},
{
title: '热门',
link: ''
}
];
}
//在对应的html文件的scss文件中
ul li{
display:inline-block;
margin:0 5px;
a{
text-decoration:none;
}
}
循环出来的效果如下:
上面的例子很好理解,然后说一些可能会用到的东西
//index是索引
//first是第一个(返回布尔值)
//last是最后一个(返回布尔值)
//奇数和偶数(在使用的时候记住数组的索引第一个是0)
//提升性能:trackBy(目前不了解)
<ul>
<li *ngFor="let item of menus; let i = index; let first = first; let last = last; let even = even; let odd = odd">
<a href="#">{{ item.title }}</a>
{{index}}//举例
</li>
</ul>
二、事件的处理和样式绑定
<ul>
<li *ngFor="let item of menus; let i = index; let first = first; let last = last; let even = even; let odd = odd">
<a href="#"
[class.active]="selectedIndex === i "
(click)="selectedIndex = i"
>
{{ item.title }}
</a>
</li>
</ul>
方括号是数据绑定
圆括号用于事件绑定
创建组件:
在src/app的终端下
在例子中我创建了一个名叫ScrollableTab的组件
ng g c ScrollableTab
封装组件总结:
1.封装组件的意义:方便维护,简化逻辑。
2.语法:ng generate component 组件名(驼峰形式)
可简写为 ng g c 组件名
当我创建一个组件的时候,不仅仅添加了上面图片中的4个文件,还更新了一个文件 app.module.ts
三、ngIf指令
<div *ngIf="条件表达式">
</div>
<div *ngIf="条件表达式"else elseContent>
为真显示
</div>
<ng-template #elseContent>
为假显示
</ng-template>
四、组件的输入输出
父给子:@Input 属性绑定
子给父:@Output 事件绑定
angular的管道:
类似于vue中的过滤器,我可以把数据进行一些修改,比如时间显示的格式或者是根据字段显示不同的文字这些操作。(个人理解,不严谨欢迎指正~)
如何使用管道:
下载
ng g pipe pipe-name
成功后会出现两个文件:
pipe-name.pipe.spec.ts //测试
pipe-name.pipe.ts //用来写自定义pipe
pipe-name.pipe.ts文件中:
transform(value: any,args?: any):any{
//transform是方法名
//第一个参数value 是带过滤的内容
//第二个参数是第一个参数处理的条件,也就是参数
}
实际举一个例子
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter'
//在模板中绑定时使用的管道名。 通常使用 lowerCamelCase 拼写方式,因为名字中不允许包含减号(-)
})
export class FilterPipe implements PipeTransform {
transform(subject: any, cource: any): any {
if (!cource) {
return subject;
}
return subject.filter(function (subjects) {
return subjects.toLowerCase().includes(cource.toLowerCase()); //实现模糊查询
});
}
}
相关api请查看ng官网
ng官网pipe部分