--Angular8实现拼多多--Angular修行日志02--

小虾米于2020年8月某日，在学习使用Angular心法实现拼多多电商平台的项目中。熟悉了Angular中以下运功要领（代码操作）

1.@Input的使用

　　@Input，用于父组件想子组件传递参数。

　　需在子组件中构建

　　　　@Input () 变量名:变量数据类型

　　的方式，进行接收参数。

　　在selector定义的组件标签中，需要通过[子组件变量名]="父组件所传递的变量" 的方式进行数据的交互。

　　这样就能实现将父组件中的数据，传递给子组件中使用。

　　优势：

　　　　方便了子组件的复用，使得组件利用率大大提高

 

2.@ViewChild、@ViewChildren

　　ViewChild和ViewChildren是Angular中获取HTML中DOM元素的方法。唯一的区别在于，ViewChild只能获取单个元素，ViewChildren可以获取多个元素。

　　使用方法如下：

　　　　需使用 #变量名 的方式绑定DOM标签元素

　　　　在HTML中，如有以下代码：

1 <div class="image-slider" #ImgSlider>
2     <img #img [src]="item.imgUrl" [alt]="item.caption" [title]="item.caption" *ngFor="let item of sliders;let i = index">
3   </div>
HTML代码

　　　　然后在ts文件中使用@ViewChild、或者@ViewChildren

　　　　@ViewChild('DOM标签变量名')  接收该DOM元素的变量名:ElementRef

　　　　@ViewChildren('DOM标签变量名')  接收该DOM元素的变量名:QueryList<ElementRef>

　　　　<>表示一个泛型，QueryList<ElementRef>表示的意义是一个QueryList数组，里面存放ElemnrtRef类型的数据

　　然后便有了以下代码：

1   @ViewChild('ImgSlider',{static: true}) imgSlider: ElementRef;
2   @ViewChildren('img') imgs: QueryList<ElementRef>;
TypeScript代码

 

小虾米于今日遇见颇多bug，运功受阻，浪费时光，着实可惜。然失误之中仍有所得，也算进步一些~

 

posted @ 2020-08-26 17:46  小虾米在code江湖  阅读(198)  评论(0)  编辑  收藏  举报