Question

我正在尝试在我的有角度的项目中添加html模板，但出现的错误很少，而且我不知道这是什么问题。

我的项目在这里：

https://bitbucket.org/shakir_123/angular-theme/src/master/

这里，当我在index.html中添加这些文件时，它工作正常。

 <!DOCTYPE html>
<html lang="en">
  <head>
      <title>Hello World</title>
      <base href="/">
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
  </head>
  <body>
       #code can be found here: https://gist.github.com/nwoow/4108e4d8d8e0cc532fe5eda3a923317d
  </body>
</html>

这个工作文件，但是当我将其添加到我的app.component.html中时：

<div class="main-wrapper">
   #code can be found here: https://gist.github.com/nwoow/4108e4d8d8e0cc532fe5eda3a923317d
</div>

一切正常，但滑块不起作用。我不知道这是什么问题，我该如何使其工作。

Answer 1

根据您提供的信息给出答案非常困难。提出问题时，请尽量具体，并提供尽可能多的信息。

但是，我会尽力提供一些帮助。通过滑块，我假设您是主页上的滑块。查看源代码（并克隆存储库并在本地运行），据我所知，您提供了滑块swiper。我可以看到您在angular-cli.json中包含了CSS和js，但是您没有在任何地方初始化Swiper。

我的第一个建议是阅读swiper文档和google，以了解swiper以及angular实现示例。

但是，为了使您的生活更轻松，我建议您使用angular2-use-swiper npm软件包。您可以阅读文档并查看示例实现here

npm install --save angular2-useful-swiper

然后通过npm安装Swiper

npm install --save swiper@3.4.2

已将引用删除为您的angular-cli.json并添加以下内容

"styles": [
    "styles.css",
    "../node_modules/swiper/dist/css/swiper.css"        
],
"scripts": [
    "../node_modules/swiper/dist/js/swiper.js"                
],

在您的应用程序中的适当级别上导入SwiperModule。

import { NgModule }       from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';

import { SwiperModule } from 'angular2-useful-swiper';

import { AppComponent }   from './app.component';

@NgModule({
    imports: [
        BrowserModule,
        SwiperModule
    ],
    declarations: [
        AppComponent,
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

然后为滑块创建一个组件，例如：

HTML：

<swiper [config]="config">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
           <div class="swiper-slide">Slide 2</div>
           <div class="swiper-slide">Slide 3</div>
           <div class="swiper-slide">Slide 4</div>
         </div>
         <!-- Add Pagination -->
         <div class="swiper-pagination"></div>
         <!-- Add Arrows -->
         <div class="swiper-button-next"></div>
         <div class="swiper-button-prev"></div>
    </div>
</swiper>

TypeScript

export class MySwpierComponent implements OnInit {

    config: SwiperOptions = {
            pagination: '.swiper-pagination',
            paginationClickable: true,
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            spaceBetween: 30
        };
}

将新组件注入所需的模块并使用。希望这有助于解决您的问题。

Angular 6集成现有的html模板

1 个答案: