angular获取模板中的局部变量--#

最新推荐文章于 2024-05-17 18:00:52 发布

qq_23876873

最新推荐文章于 2024-05-17 18:00:52 发布

阅读量3.1k

点赞数

分类专栏： angular

本文链接：https://blog.csdn.net/qq_23876873/article/details/81197068

版权

angular 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<div class="controlContainer">
  <span class="controlBar" (click)="carousel.pre()">
    <i class="anticon anticon-left">1</i>
  </span>
  <span class="controlBar" (click)="carousel.next()">
    <i class="anticon anticon-right">2</i>
  </span>
</div>
<nz-carousel #carousel [nzEffect]="effect"  >//#carousel模板局部变量，用于在代码中获取
  <div class="go" nz-carousel-content *ngFor="let index of array">
    <div><img src="{{index}}"></div>
  </div>
</nz-carousel>

import { Component, OnInit ,AfterViewInit,ViewChild} from '@angular/core';
import { NzCarouselComponent } from 'ng-zorro-antd';
import { ElementRef } from '@angular/core';


// import * as $ from 'jquery';
// import *as Swiper from "../../../node_modules/swiper/dist/js/swiper";
@Component({
  selector: 'app-myswiper',
  templateUrl: './myswiper.component.html',
  styleUrls: ['./myswiper.component.css']
})
export class MyswiperComponent implements OnInit,AfterViewInit{
  constructor(public element: ElementRef) {}
  ngAfterViewInit(): void {
    // console.log(this.carousel);
    // console.log(this.element.nativeElement.querySelector('#carousel').goTo(2));
    console.log(this.carousel);

  }
  array = [ "../../assets/imgs/banner1.jpg",
            "../../assets/imgs/banner2.jpg",
            "../../assets/imgs/banner3.jpg"];
  // array =[1,2,3,4];
  effect = 'scrollx';
  // NzCarouselComponent 
  
  // 使用ViewChild获取模板中的局部变量#carousel，获取后为原对象不是dom对象
  @ViewChild('carousel')
  carousel:NzCarouselComponent;
  ngOnInit() {
    setTimeout(() => {
      this.effect = 'fade';
    }, 1000);
  }
  


}