如何在 angular 5 中的 ngOnInit 上调用 NgbCarousel 的 pause() 函数

Question

我是 angular 的新手，我的 ui 使用 ngbootstrap。默认情况下，我无法在暂停模式下加载 NgbCarousel。下面是我试过的代码

    import { Component, OnInit, ViewChild } from '@angular/core';
    import { NgbCarousel } from '@ng-bootstrap/ng-bootstrap';
    @Component({
      selector: 'app-dashboard',
      templateUrl: './dashboard.component.html',
      styleUrls: ['./dashboard.component.css'],
      providers: [NgbCarousel] // add NgbCarouselConfig to the component providers

    })
     export class DashboardComponent implements OnInit {

    constructor(private auth: AuthService, private ngbCarousel: NgbCarousel) {}
    ngOnInit() {
        this.ngbCarousel.pause();
    }
    }

下面是 html 文件：

<div class="jumbotron">
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-9">
        <ngb-carousel>
          <ng-template ngbSlide>
            <img src="https://lorempixel.com/900/500?r=1" alt="Random first slide">
            <div class="carousel-caption">
              <h3>First slide label</h3>
              <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
            </div>
          </ng-template>
          <ng-template ngbSlide>
            <img src="https://lorempixel.com/900/500?r=2" alt="Random second slide">
            <div class="carousel-caption">
              <h3>Second slide label</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
          </ng-template>
          <ng-template ngbSlide>
            <img src="https://lorempixel.com/900/500?r=3" alt="Random third slide">
            <div class="carousel-caption">
              <h3>Third slide label</h3>
              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
            </div>
          </ng-template>
        </ngb-carousel>
      </div>
    </div>
  </div>
</div>

但是暂停不起作用，我没有收到任何错误。这是调用暂停方法的正确方法吗？请 guide me .

Answer 1

编辑：请使用 AfterViewInit 生命周期挂钩，因为此挂钩在组件视图初始化后 被调用（参见 lifecycle hooks documentation 来自 Angular了解更多信息）：

import { AfterViewInit, ViewChild } from '@angular/core'; // ... export class DashboardComponent implements AfterViewInit { @ViewChild('carousel') carousel: NgbCarousel; ngAfterViewInit() { this.carousel.pause(); } }

删除组件上的 NgbCarousel 作为提供者，因为根据 docs，NgbCarousel 是一个组件和不是一个服务:

@Component({ selector: 'app-dashboard', templateUrl: './dashboard.component.html', styleUrls: ['./dashboard.component.css'] // Remove providers array })

在 <ngb-carousel> 元素上添加模板引用，并使用带有模板引用的 ViewChild 作为选择器，然后在 [=18] 上调用 pause =]实例：

<ngb-carousel #carousel>  </ngb-carousel>

import { AfterViewInit, /* OnInit */, ViewChild } from '@angular/core'; // ... export class DashboardComponent implements AfterViewInit { @ViewChild('carousel') carousel: NgbCarousel; ngAfterViewInit() { this.carousel.pause(); } }

Answer 2

要从头开始冻结轮播，请将间隔设置为 0。

您可以在 HTML 上执行此操作：

<ngb-carousel #carousel interval="0">

或者在构造函数中：您需要从“@ng-bootstrap/ng-bootstrap”导入 NgbCarouselConfig，在 @Component 装饰器中使用它作为提供者。为此，将不再需要导入 NgbCarousel。

import { Component, OnInit, ViewChild } from '@angular/core';
import { NgbCarouselConfig } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css'],
  providers: [NgbCarouselConfig] // add NgbCarouselConfig to the component providers

})

export class DashboardComponent implements OnInit {

    constructor(config: NgbCarouselConfig) { 
        config.interval = 0;
    }

    ngOnInit() {}
}

如何在 angular 5 中的 ngOnInit 上调用 NgbCarousel 的 pause() 函数

How to call pause() function of NgbCarousel on ngOnInit in angular 5

angular-cli

ng-bootstrap

angular