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

 

 

  
    1
  
  
    2
  

//#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);
  }
  


}