Angular8 实战（十五）在组件类中引用模板

本章讲解如何在组件的类中引用模板中的元素~
先来看一小段示例

    Hello

#后面是给模板或者DOM元素起一个引用名字，以便可以在组件类或模板中进行引用。这是一个唯一标识的名字，不能重复，也不能在ngFor中使用。

export class AppComponent {
  @ViewChild('helloDiv', { static: false }) helloDivRef: ElementRef;

@ViewChild是一个选择器，用来查找要引用的DOM元素或者组件
ElementRef是DOM元素的一个包装类。因为DOM元素不是Angular中的类，所以需要一个包装类以便在Angular中使用和标识其类型。

接下来实战讲解一下：
本章先大概做一个出版的轮播图来讲解。轮播图由三部分组成：轮播图片，遮罩，遮罩上代表图片的圆点

1. 在Components文件夹下新建组件image-slider

ng g c image-slider

2.在image-slider文件夹下新建index.ts，并把组件export出来

export * from './image-slider.component';

3. 在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模板

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模板

10.在app.component中调用image-slider组件

11.app.component组件类中定义imageSliders数组(图片网上随便找的)

15-1.png

12.看一下初步的效果图

15-2.gif

13.在image-slider模板中定义引用名

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 = 'Hello world!';
  }

17.看一下效果

15-4.png

本章就讲到这里~