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，则您可能无法“看到”它。

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

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

理论上，您从该组件emit (click)，然后父组件可以订阅该事件并执行某些操作，例如将滑块移动到可以访问滑块。

您已经多次使用它，而没有意识到。例如，您的<ion-button fill="clear" (click)="next()">中的next()就是这样。在Web组件内，单击按钮。它发出click事件，然后您的外部代码运行swiper-container来处理此单击。

如果这还不足以解决您的问题，请您进一步介绍{{1}}，我将尝试为您编写一些代码。

Answer 2

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

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

2 个答案: