Angular 6 интегрирует существующий HTML-шаблон - PullRequest
Новая
       15

Angular 6 интегрирует существующий HTML-шаблон

0 голосов
/ 24 мая 2019

Я пытаюсь добавить 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>

Все работает нормально, но слайдер не работает.Я не знаю, в чем проблема, как я могу заставить это работать.

1 Ответ

1 голос
/ 24 мая 2019

Очень сложно дать ответ на основании предоставленной вами информации. Задавая вопросы, старайтесь быть конкретными и предоставлять как можно больше информации.

Однако я сделаю все возможное, чтобы оказать некоторую помощь. По слайдеру я предполагаю, что вы мне слайдер на главной странице. Глядя на исходный код (и клонируя репо и работая локально), вы предоставили ползунок, насколько я могу судить, использует swiper . Я вижу, что вы включили css и js для этого в angular-cli.json, но вы нигде не инициализируете Swiper.

Моим первым предложением было бы прочитать документацию swiper и google для примеров реализации swiper plus angular.

Однако, чтобы сделать вашу жизнь проще, я бы предложил использовать пакет angular2 -ful-swiper npm. Вы можете прочитать документацию и посмотреть пример реализации здесь 

npm install --save angular2-useful-swiper

Затем установите Swiper через npm 

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>

машинопись 

export class MySwpierComponent implements OnInit {

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

Введите ваш новый компонент в нужный модуль и используйте. Надеюсь, это поможет решить вашу проблему.

...