angular核心概念快速入门

1.指令 directive

指令就像是属性 需要宿主元素 改变宿主元素的样式 appGridItemImage appGridItemTitle

 <img appGridItemImage="2rem" [src]="item.icon" alt="" />
 <span appGridItemTitle="0.6rem" class="title">{{ item.title }}</span>

详细参考anglar指令的使用_lee727n的博客-CSDN博客

2.服务 service (依赖注入)

其实就是通过服务进行依赖注入

@Injectable()
export class HomeService {
 
  imageSliders: ImageSlider[] = [
    {
      imgUrl:
        'https://media.istockphoto.com/photos/morning-jogging-picture-id497687118',
      link: '',
      caption: ''
    },]
  getBanners() {
    return this.imageSliders;
  }
 }

@NgModule({
  declarations: [
    HomeDetailComponent,
  ],
  providers:[HomeService]
  imports: [SharedModule, HomeRoutingModule]
})

通过module的providers属性进行依赖注入

详细参考angular 服务 .service.ts_lee727n的博客-CSDN博客

3.投影 ng-conent

  <app-horizontal-grid>
    <span appGridItem *ngFor="let item of channels">
      <img appGridItemImage="2rem" [src]="item.icon" alt="" />
      <span appGridItemTitle="0.6rem" class="title">{{ item.title }}</span>
    </span>
  </app-horizontal-grid>

app-horizontal-grid内部使用投影 将span包裹内容全部传入到组件内部进行显示，并且显示到对应位置。

<div
  class="container"
  [ngStyle]="{
    'grid-template-rows': templateRows,
    'grid-template-columns': templateColumns
  }"
  (scroll)="handleScroll($event)"
>
  <ng-content select="[appGridItem]"></ng-content>
</div>

详细参考：angular 投影概念_lee727n的博客-CSDN博客

4.管道 .pipe

angular的管道其实就可以理解成翻译器。将一种文字转换为另一种文字

<p>
  {{ date | appAgo }}
</p>

appAgo.pipe.ts

@Pipe({ name: 'appAgo' })
export class AgoPipe implements PipeTransform {
  transform(value: any): any {
    if (value) {
     -------转换处理
    return value;
  }
}

value入参 然后转换 然后再return 变成你想要的样子

详细参考：angular 管道pipe_lee727n的博客-CSDN博客