Question

the interface我在角度8中实现了ngu-carousel，以显示组件列表，在同一页面上，我有一个ng-bootstrap模态组件，在页面load时显示。当我集成ngu-carousel时，模态不会在页面加载时显示，并且有些提示如何在我单击“ carousel”按钮在组件上滑动时显示模态，并且禁用了移动滑块的事件。

ngu-carousel component.ts：

import {
  Component,
  OnInit,
  Input,
  ViewChild,
  ViewEncapsulation,
  AfterViewInit,
  ChangeDetectorRef
} from "@angular/core";

import { NguCarousel, NguCarouselConfig } from "@ngu/carousel";

@Component({
  selector: "app-carousel",
  templateUrl: "./carousel.component.html",
  styleUrls: ["./carousel.component.css"],
  providers: [NgbCarouselConfig],
  encapsulation: ViewEncapsulation.None
})
export class CarouselComponent implements OnInit, AfterViewInit {
  name = "Angular";
  slideNo = 0;
  withAnim = true;
  resetAnim = true;

  @Input() listServices: [];
  @ViewChild("myCarousel", { static: false }) myCarousel;
  carouselConfig: NguCarouselConfig = {
    grid: { xs: 0, sm: 0, md: 0, lg: 0, all: 1 },
    load: 0,
    interval: { timing: 4000, initialDelay: 1000 },
    loop: false,
    touch: true,
    velocity: 0.2
  };

  constructor(private cdr: ChangeDetectorRef) {}

  ngOnInit() {
    console.log(this.listServices);
  }

  ngAfterViewInit() {
    this.cdr.detectChanges();
  }
  reset() {
    this.myCarousel.reset(!this.resetAnim);
  }

  moveTo(slide) {
    this.myCarousel.moveTo(slide, !this.withAnim);
  }
}

ngu-carousel .html

<ngu-carousel #myCarousel [dataSource]="listServices">
  <div *nguCarouselDef="let service" class="item">
    <div class="tile">
      <app-service-item [service]="service"></app-service-item>
    </div>
  </div>
  <button NguCarouselNext class="rightRs">></button>
  <button NguCarouselPrev class="leftRs"><</button>
  <ul class="myPoint" NguCarouselPoint>
    <li
      *ngFor="let j of myCarousel.listServices; let j = index"
      [class.active]="j == myCarousel.activePoint"
      (click)="myCarousel.moveTo(j)"
    ></li>
  </ul>
</ngu-carousel>

ng-bootsrap modal.ts

import { Component, OnInit, AfterViewInit, ViewChild } from "@angular/core";

import { NgbModal, ModalDismissReasons } from "@ng-bootstrap/ng-bootstrap";
import { fade } from "../../animations/animations";

@Component({
  selector: "app-how-it-works",
  templateUrl: "./how-it-works.component.html",
  styleUrls: ["./how-it-works.component.css"],
  animations: [fade]
})
export class HowItWorksComponent implements OnInit, AfterViewInit {
  closeResult: string;

  @ViewChild("content", { static: false }) myModal: Component;

  constructor(private modalService: NgbModal) {}

  ngOnInit() {}

  ngAfterViewInit() {
    this.open(this.myModal);
  }

  open(content) {
    this.modalService
      .open(content, {
        ariaLabelledBy: "modal-basic-title",
        size: "xl",
        windowClass: "lodal-xl"
      })
      .result.then(
        result => {
          this.closeResult = `Closed with: ${result}`;
        },
        reason => {
          this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
        }
      );
  }

  private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
      return "by pressing ESC";
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
      return "by clicking on a backdrop";
    } else {
      return `with: ${reason}`;
    }
  }
}

我在其中渲染两个components.html

<div class="container">
  <div class="row mt-5">
    <div class="col-sm-12">
      <app-carousel [listServices]="listServices"> </app-carousel>
    </div>
  </div>
  <div class="row d-flex justify-content-end mt-5">
    <app-how-it-works class="modal-help"></app-how-it-works>
  </div>
</div>

与ngu-carousel和ng-bootsrap模态冲突

0 个答案: