angular核心概念快速入门

最新推荐文章于 2023-05-06 23:02:13 发布

MIKE-zi

最新推荐文章于 2023-05-06 23:02:13 发布

阅读量306

点赞数

分类专栏： angular入门文章标签： angular.js angular核心语法 angular快速入门管道指令投影服务

本文链接：https://blog.csdn.net/lee727n/article/details/122662952

版权

angular入门专栏收录该内容

20 篇文章 2 订阅

订阅专栏

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博客