Когда я использую компонент на домашней странице, файл ts ионного компонента не работает

Question

Итак, я добавил свой ионный компонент на мою ионную страницу.Он отображает, однако, все мои функции в файле component.ts не работают?

вот мой домашний html (здесь я хотел бы отобразить свой компонент):

<ion-content>
    <app-ion-col></app-ion-col>
</ion-content>

это мой компонент html:

<div class="ion-padding">
    <ion-grid>
        <ion-row>
          <ion-col size="10">
            <h1>{{viewTitle}}</h1>
          </ion-col>
          <ion-col size="2">
            <!-- Add event -->
            <ion-fab>
              <ion-fab-button size="small" (click)="openPopover($event)">
                <ion-icon name="add"></ion-icon>
              </ion-fab-button>
            </ion-fab>
          </ion-col>
        </ion-row>
        <ion-row>
          <!-- Move back one screen of the slides -->
          <ion-col size="4" text-left>
            <ion-button fill="clear" (click)="back()">
              <ion-icon name="arrow-back" slot="icon-only"></ion-icon>
            </ion-button>
          </ion-col>

          <!-- Move back to today -->
          <ion-col size="4">
            <ion-buttons class="todayBtn">
              <ion-button color="primary" expand="block" (click)="today()">Today</ion-button>
            </ion-buttons>                   
          </ion-col>

          <!-- Move forward one screen of the slides -->
          <ion-col size="4" text-right>
            <ion-button fill="clear" (click)="next()">
              <ion-icon name="arrow-forward" slot="icon-only"></ion-icon>
            </ion-button>
          </ion-col>
        </ion-row>
      </ion-grid>
      <calendar 
        [eventSource]="eventSource" 
        [calendarMode]="calendar.mode" 
        [currentDate]="calendar.currentDate"
        (onEventSelected)="onEventSelected($event)"
        (onTitleChanged)="onViewTitleChanged($event)"
        (onTimeSelected)="onTimeSelected($event)" 
        startHour="6"
        endHour="20"
        step="30"
        startingDayWeek="1">
      </calendar>
</div>

component .ts (как вы можете видеть выше, я использую селектор):

import { Component, ViewChild, OnInit, Inject, LOCALE_ID } from '@angular/core';
import { CalendarComponent } from 'ionic2-calendar/calendar';
import { AlertController, PopoverController } from '@ionic/angular';
import { formatDate } from '@angular/common';

import { AddEventComponent } from './add-event/add-event.component';

@Component({
  selector: 'app-ion-col',
  templateUrl: './ion-col.component.html',
  styleUrls: ['./ion-col.component.scss'],
})
export class IonColComponent implements OnInit {

  event = {
    title: '',
    description: '',
    startTime: '',
    endTime: '',
    allDay: false
  };

  minDate = new Date().toISOString();

  calendar = {
    mode: 'month',
    currentDate: new Date()
  };

  viewTitle = 'view';

  @ViewChild(CalendarComponent) myCal: CalendarComponent;

// tslint:disable-next-line: max-line-length
  constructor(private alertCtrl: AlertController, @Inject(LOCALE_ID) private locale: string, private popoverController: PopoverController) {}

  ngOnInit() {
    this.myCal.loadEvents();
  }

  // changeMode(mode) {
  //   this.calendar.mode = mode;
  // }

  back() {
    const swiper = document.querySelector('.swiper-container') ['swiper'];
    swiper.slidePrev();
  }

  next() {
    const swiper = document.querySelector('.swiper-container') ['swiper'];
    swiper.slideNext();
  }

  today() {
    this.calendar.currentDate = new Date();
  }

  async onEventSelected(event) {
    const start = formatDate(event.startTime, 'medium', this.locale);
    const end = formatDate(event.endTime, 'medium', this.locale);

    const alert = await this.alertCtrl.create({
      header: event.title,
      subHeader: event.description,
      message: 'From: ' + start + '<br><br>To: ' + end,
    });
    alert.present();
  }

  onViewTitleChanged(title) {
    this.viewTitle = title;
  }

  onTimeSelected(ev) {
    const selected = new Date(ev.selectedTime);
    this.event.startTime = selected.toISOString();
    selected.setHours(selected.getHours() + 1);
    this.event.endTime = (selected.toISOString());
  }

  async openPopover(ev: Event) {
    const popover = await this.popoverController.create({
      component: AddEventComponent,
      event: ev,
      translucent: true
    });
    popover.present();
  }

  closePopover() {
    this.popoverController.dismiss();
  }


}

Как объяснено, html компонента отображает, этоэто когда я пытаюсь нажать на любую из моих функций щелчка, которая, кажется, не работает.html

Answer 1

Проблема заключалась в боковом меню. Я добавил боковое меню в общую папку и импортировал его. Таким образом, все, что находится за боковым меню, не позволяет нажимать на другие элементы на странице

Answer 2

Этот код, вероятно, является проблемой:

  back() {
    const swiper = document.querySelector('.swiper-container') ['swiper'];
    swiper.slidePrev();
  }

  next() {
    const swiper = document.querySelector('.swiper-container') ['swiper'];
    swiper.slideNext();
  }

Что это за swiper-container?

Если это где-то на странице ion-slide, то вы, вероятно, не сможете его "увидеть".

Ionic 4 использует веб-компоненты, и они инкапсулированы.Вы не можете просто использовать традиционные методы, чтобы ухватиться за кусочки страницы, поскольку они скрыты от внешнего мира.Это означает, что веб-компонент может работать, не будучи нарушенным каким-либо другим конфликтующим веб-компонентом на странице.

Я думаю, что вам понадобится событие @Output.

Теорияявляется то, что вы emit событие (например, обратное событие) из этого компонента, а затем родительский компонент может подписаться на это событие и сделать что-то, например, переместить ползунок туда, где он имеет доступ к ползунку.

Вы использовали это раньше много раз, не осознавая этого.Вот что, например, (click) вашего <ion-button fill="clear" (click)="next()">.Внутри веб-компонента кнопка нажата.Он генерирует событие click, а затем ваш код снаружи запускает next() для обработки этого клика.

Если этого недостаточно для решения вашей проблемы, пожалуйста, не могли бы вы дать немного больше представления о swiper-container, и япостараюсь написать какой-нибудь код для вас.