本章讲解如何在组件的类中引用模板中的元素~
先来看一小段示例
<div #helloDiv>
Hello
</div>
#后面是给模板或者DOM元素起一个引用名字，以便可以在组件类或模板中进行引用。这是一个唯一标识的名字，不能重复，也不能在ngFor中使用。
export class AppComponent {
@ViewChild('helloDiv', { static: false }) helloDivRef: ElementRef;
@ViewChild是一个选择器，用来查找要引用的DOM元素或者组件
ElementRef是DOM元素的一个包装类。因为DOM元素不是Angular中的类，所以需要一个包装类以便在Angular中使用和标识其类型。
接下来实战讲解一下：
本章先大概做一个出版的轮播图来讲解。轮播图由三部分组成：轮播图片，遮罩，遮罩上代表图片的圆点
- 在Components文件夹下新建组件image-slider
ng g c image-slider
2.在image-slider文件夹下新建index.ts，并把组件export出来
export * from './image-slider.component';
- 在Components文件夹下的index.ts中导出image-slider
export * from './scrollable-tab';
export * from './image-slider';
4.在AppModule中引用
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { ScrollableTabComponent } from './components';
import { ImageSliderComponent } from './components';
@NgModule({
declarations: [
AppComponent,
ScrollableTabComponent,
ImageSliderComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
5.构建image-slider模板
<div class="container">
<div class="image-slider">
<img src="" alt="">
</div>
<div class="nav-selection">
<span class="slide-button"></span>
</div>
</div>
6.模板样式
.container {
position: relative;
overflow: hidden;
}
.container .image-slider {
display: flex;
overflow-x: scroll;
}
.nav-selection {
position: absolute;
bottom: 0;
width: 100%;
opacity: 0.5;
color: #fff;
background-color: #000;
display: flex;
justify-content: flex-end;
align-items: stretch;
}
.nav-selection .slide-button {
display: flex;
width: 10px;
height: 10px;
background-color: #fff;
text-decoration: none;
border-radius: 50%;
margin: 5px;
}
7.定义轮播图图片类
export interface ImageSlider {
imgUrl: string;
link: string;
caption: string;
}
8.在image-slider组件中定义输入属性sliders
@Input() sliders: ImageSlider[] = [];
9.更新一下image-slider模板
<div class="container">
<div class="image-slider">
<img *ngFor="let slider of sliders" [src]="slider.imgUrl" [alt]="slider.caption">
</div>
<div class="nav-selection">
<span *ngFor="let _ of sliders; let idx=index" class="slide-button"></span>
</div>
</div>
10.在app.component中调用image-slider组件
<app-scrollable-tab
[menus]="topBars"
[backgroundColor]="scrollabelTabBackgroundColor" menuActiveColor="red" menuColor="black"
(tabSelected)="handleTabSelected($event)">
</app-scrollable-tab>
<app-image-slider [sliders]="imageSliders"></app-image-slider>
11.app.component组件类中定义imageSliders数组(图片网上随便找的)
15-1.png
12.看一下初步的效果图
15-2.gif
13.在image-slider模板中定义引用名
<div class="container">
<div class="image-slider" #imageSlider>
<img *ngFor="let slider of sliders" [src]="slider.imgUrl" [alt]="slider.caption">
</div>
<div class="nav-selection">
<span *ngFor="let _ of sliders; let idx=index" class="slide-button"></span>
</div>
</div>
14.在组件类中引用
export class ImageSliderComponent implements OnInit {
@ViewChild('imageSlider', { static: true }) imgSlider: ElementRef;
@Input() sliders: ImageSlider[] = [];
constructor() { }
ngOnInit() {
console.log('ngOnInit', this.imgSlider);
}
}
关于Static为true或false是有讲究的，如果这个元素在ngIF或ngFor包含之下，那么就是动态的即static为false；否则static为true。
15.看一下效果
15-3.gif
16.尝试更改一下DOM元素(在angular中不提倡直接操作DOM)
ngOnInit() {
console.log('ngOnInit', this.imgSlider);
this.imgSlider.nativeElement.innerHTML = '<span>Hello world!</span>';
}
17.看一下效果
15-4.png
本章就讲到这里~
