Angular 6 集成现有 html 模板

Question

我正在尝试在我的 angular 项目中添加 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

根据您提供的信息很难给出答案。提问时尽量具体并提供尽可能多的信息。

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

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

但是，为了让您的生活更轻松，我建议您使用 angular2-useful-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 模板

Angular 6 integrating existing html template

html

javascript

swiper

angular