当我使用主页中的组件时，ionic component 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>

组件.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所显示的那样，当我试图点击我的任何点击功能时，似乎什么都不起作用。

但是，它会将数据从component.ts文件拉入并显示到component.html，因此也会显示在home.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使用web组件，并且它们是封装的。您不能只使用传统技术来抓取页面的某些部分，因为它们对外部世界是隐藏的。这使得web组件可以在不被页面上的某些其他冲突的web组件破坏的情况下运行。

我认为您需要的是一个@Output事件。

其原理是您从该组件emit一个事件(例如back事件)，然后父组件可以订阅该事件并执行某些操作，例如将滑块移动到它可以访问滑块的位置。

你以前在没有意识到的情况下使用过很多次。例如，这就是你的<ion-button fill="clear" (click)="next()">的(click)。在web组件中，单击该按钮。它会发出单击事件，然后您的外部代码将运行next()来处理此单击。

如果这还不足以解决您的问题，请您提供更多关于swiper-container的概念，我将尝试为您编写一些代码。