我是 angular 的新手,并且使用 ngbootstrap 作为我的 UI。默认情况下,我无法在暂停模式下加载 Ngb轮播。下面是我尝试过的代码
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>
但是暂停不起作用,我没有收到任何错误。这是调用暂停方法的正确方法吗?请指导我.
编辑:请使用AfterViewInit
生命周期钩子,因为此钩子是在初始化组件视图后调用的(有关更多信息,请参阅 Angular 的生命周期钩子文档(:
import { AfterViewInit, ViewChild } from '@angular/core';
// ...
export class DashboardComponent implements AfterViewInit {
@ViewChild('carousel') carousel: NgbCarousel;
ngAfterViewInit() {
this.carousel.pause();
}
}
删除作为组件上的提供程序的
NgbCarousel
,因为根据文档,NgbCarousel
是一个组件而不是服务:@Component({ selector: 'app-dashboard', templateUrl: './dashboard.component.html', styleUrls: ['./dashboard.component.css'] // Remove providers array })
在
<ngb-carousel>
元素上添加模板引用,并使用具有模板引用的ViewChild
作为选择器,然后在ViewChild
实例上调用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(); } }
要从一开始就冻结轮播,请将间隔设置为 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() {}
}