Angular:如何从ng-bootstrap导入和使用Carousel?

问题描述 投票:1回答:1

我的任务是使用ng-bootstrap为Angular 6沙箱设置样式。那部分进展顺利。现在我正在尝试安装旋转木马,我正在撞墙。我正在使用ng-bootstrap轮播,因为我觉得这可能是最好的选择,但欢迎任何其他建议,例如“纯粹的javascript”轮播。

请注意,这是我的设置:

CLI Angular:6.0.7节点:10.3.0 OS:darwin x64

我找到了ng安装说明:

https://ng-bootstrap.github.io/#/getting-started

但似乎我需要更多的东西拼写出来。第一部分有效:

npm install --save @ng-bootstrap/ng-bootstrap

但下一部分让我失望:

剩下的唯一部分是列出根模块中导入的模块以及使用此库中组件的任何其他应用程序模块。对于根(顶级)模块,确切的方法将略有不同,您应该以类似于(注意NgbModule.forRoot())的代码结束:

什么是'根模块'?我假设这将是app.module.ts。所以我将新代码添加到app.module.ts:

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgbModule.forRoot(), ...],
  bootstrap: [AppComponent]
})
export class AppModule {
}

我看到有另一个版本的代码可以添加到除root之外的所有模块。没问题。我检查了我的网站,它仍然运作。

注意,我还假设我不需要对app.component.ts做任何事情,对吗?我最初认为我需要添加导入到它:

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

并没有打破网站,虽然我不认为这是必要的,所以我删除它。

所以app.module.ts应该不错。接下来,添加示例页面上的实际轮播代码:

https://ng-bootstrap.github.io/#/components/carousel/examples

现在,我对准系统测试它的最佳方法感到茫然。我应该将核心模块和/或组件用作我的组件吗?或者我应该生成一个新组件?我看到了一个向Angular 5添加轮播的教程,它只是将代码添加到核心模块/组件中,这就是我现在正在尝试的内容。可能是一个大错误?请告诉我。

无论如何,如果我将carousel-basic.html添加到app.component.html,并将carousel-basic.ts添加到app.component.ts,我会收到错误。特别,

./src/app/app.module.ts
Module not found: Error: Can't resolve './carousel-basic.html'

如果我改变./component.html的路径,它没有帮助。

所以在这一点上,我错过了一些基本的东西,但很难找到正确的问题。

有人能指点我一些指导吗?

谢谢

angular carousel ng-bootstrap
1个回答
0
投票

(1)最好添加一个新的component.ts文件(代码如下)

import { Component, OnInit } from '@angular/core';

从'@ ng-bootstrap / ng-bootstrap'导入{NgbCarouselConfig};

@Component({selector:'app-slider',templateUrl:'。/ slider.component.html',styles:['']})导出类SliderComponent实现OnInit {

images = ['https://www.akberiqbal.com/AkberIqbal.jpg', 'https://www.akberiqbal.com/AkberIqbal-og.jpg' ,'https://www.akberiqbal.com/AkberIqbal.jpg', 'https://www.akberiqbal.com/AkberIqbal-og.jpg']

constructor(private config: NgbCarouselConfig) {
  // customize default values of carousels used by this component tree
  this.config.interval = 10000;
  this.config.wrap = false;
  this.config.keyboard = false;
  this.config.pauseOnHover = false;
}

ngOnInit(): void { }

}

(2)将HTML插入component.html(来自https://ng-bootstrap.github.io/#/components/carousel/examples

(3)在你的app.component.ts中,添加

(4)在你正在工作的文件夹中... npm install bootstrap @ 4

(5)转到index.html并添加

你的代码应该按预期工作......

© www.soinside.com 2019 - 2024. All rights reserved.