当我在主页中使用该组件时，ionic 组件 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 所显示的那样，当我尝试点击我的任何点击功能时，似乎没有任何效果。

然而，它正在从 component.ts 文件中提取和显示数据到 component.html，因此也在 home.html

上显示

Answer 1

此处的代码可能是问题所在：

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

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

这是什么swiper-container？

如果它是页面上其他地方的 ion-slide 那么您可能无法 "see" 它。

Ionic 4 使用 Web 组件并且它们是封装的。您不能只使用传统技术来获取页面的某些部分，因为它们对外界是隐藏的。这样 Web 组件就可以运行而不会被页面上其他一些冲突的 Web 组件破坏。

我认为您需要的是 @Output 活动。

理论是您 emit 来自此组件的事件（例如返回事件），然后父组件可以订阅该事件并执行某些操作，例如将滑块移动到它有权访问的位置到滑块。

你已经在不知不觉中用过很多次了。例如，这就是 <ion-button fill="clear" (click)="next()"> 的 (click)。在 Web 组件内，单击按钮。它发出点击事件，然后您的外部代码运行 next() 来处理此点击。

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

Answer 2

问题出在侧边菜单上。我在共享文件夹下添加了 side-menu 并导入了它。因此，将所有内容放在 side-menu 之后，不允许单击页面上的任何其他元素

当我在主页中使用该组件时，ionic 组件 ts 文件不起作用

ionic component ts file is not working when I use the component in the home page

angular

ionic4