Angular day2 组件相关 + pipe

一.循环 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部分