作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我是 Angular 的新手,我的用户界面使用 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>
但是暂停不起作用,我没有收到任何错误。这是调用暂停方法的正确方法吗?请指导我。
最佳答案
编辑:请使用 AfterViewInit
生命周期 Hook ,因为此 Hook 在组件的 View 初始化后 被调用(有关更多信息,请参阅 Angular 的 lifecycle hooks documentation):
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
使用模板引用作为选择器,然后调用 pause
在 ViewChild
上实例:
<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();
}
}
关于angular - 如何在angular 5的ngOnInit上调用NgbCarousel的pause()函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48203536/
我正在尝试创建一个缩略图行来切换轮播的幻灯片。 点击事件有效,旋转木马正确定位 - 我在 NgbCarousel 代码中放置了一些断点,传递的幻灯片 ID 正确,并且它一直工作到幻灯片的切换。然而,幻
我是一名优秀的程序员,十分优秀!