Angular 6集成现有的html模板

Question

I am trying to add html template in my angular project but I am getting few errors, and I don't know what is the issue. 我正在尝试在我的有角项目中添加html模板，但出现的错误很少，而且我不知道这是什么问题。

My project is here: 我的项目在这里：

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

Here When I am adding these files in index.html it works fine. 在这里，当我在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>

This work file but when I adding this into my app.component.html: 这个工作文件，但是当我将其添加到我的app.component.html中时：

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

Everything works fine but the slider is not working. 一切正常，但滑块不起作用。 I don't know what is the issue how can I make it work. 我不知道这是什么问题，我该如何使其工作。

Answer 1

It is super hard to give an answer based on the information you provided. 根据您提供的信息给出答案非常困难。 When asking questions try to be specific and provide as much information as possible. 提出问题时，请尽量具体，并提供尽可能多的信息。

However, I will do my best to provide some assistance. 但是，我会尽力提供一些帮助。 By the slider, I assume you me the slider on the home page. 通过滑块，我假设您是主页上的滑块。 Looking at the source code (and cloning the repo and running locally) you provided the slider as far as I can tell uses swiper . 查看源代码（并克隆存储库并在本地运行），据我所知，您提供了滑块swiper 。 I can see you include the css and js for this in the angular-cli.json but you don't initialize Swiper anywhere. 我可以看到您在angular-cli.json中包含了CSS和js，但是您没有在任何地方初始化Swiper。

My first suggestion would be to read the swiper documentation and google for swiper plus angular implementation examples. 我的第一个建议是阅读swiper文档和google，以了解swiper以及angular实现示例。

However,to make your life easier I would suggest using the angular2-useful-swiper npm package. 但是，为了使您的生活更轻松，我建议您使用angular2-use-swiper npm软件包。 You can read the documentation and see example implementation here 您可以阅读文档并在此处查看示例实现

npm install --save angular2-useful-swiper

Then install Swiper via npm 然后通过npm安装Swiper

npm install --save swiper@3.4.2

Remove the references already your angular-cli.json and add the following 删除引用已经是您的angular-cli.json并添加以下内容

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

Import the SwiperModule at the appropriate level in your app. 在您的应用程序中的适当级别上导入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 { }

Then create a component for your slider something like: 然后为滑块创建一个组件，如下所示：

HTML: 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
        };
}

Inject your new component into the desired module and use. 将新组件注入所需的模块并使用。 Hope this helps resolve your issue. 希望这有助于解决您的问题。

Angular 6集成现有的html模板

问题描述

1 个解决方案

解决方案1
1 2019-05-24 09:43:43

Angular 6集成现有的html模板

问题描述

1 个解决方案

解决方案1 1 2019-05-24 09:43:43

解决方案1
1 2019-05-24 09:43:43