Ionic 4 中的冲突组件：IonCard 和 SwingCardComponent

我正在关注本教程，并且我在 Ionic3 和 4 之间的差异方面面临一些困难。我正在使用 Ionic4，当我这样做时ionic serve一切都编译成功，但是当我转到网络浏览器时，控制台中出现以下错误：

Uncaught Error: Template parse errors:
More than one component matched on this element.
Make sure that only one component's selector can match a given element.
Conflicting components: IonCard,SwingCardComponent ("stackConfig" (throwoutleft)="voteUp(true)" (throwoutright)="voteUp(false)"
    id="card-stack">
    [ERROR ->]<ion-card #mycards1 swing-card *ngFor="let c of cards">
      <ion-item *ngIf="c.picture">

我想知道为什么我不能同时使用离子卡和摇摆卡以及我应该使用什么。我的 home.page.html 文件如下：

    <ion-header>
      <ion-toolbar>
        <ion-title>
          Ionic Blank
        </ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content padding>
      <div swing-stack #myswing1 [stackConfig]="stackConfig" (throwoutleft)="voteUp(true)" (throwoutright)="voteUp(false)"
        id="card-stack">
        <ion-card #mycards1 swing-card *ngFor="let c of cards">
          <ion-item *ngIf="c.picture">
            <ion-avatar item-left>
              <img *ngIf="c.picture" [src]="c.picture.medium">
            </ion-avatar>
            <h2>{{ c.name.first }} {{ c.name.last}}</h2>
            <p>{{ c.email }}</p>
          </ion-item>

          <ion-card-content *ngIf="c.location">
            From: {{ c.location.city }}, {{ c.location.postcode }}<br>
            Phone: {{ c.phone }}
          </ion-card-content>

          <ion-row *ngIf="c.name">
            <ion-col>
              <button ion-button clear small icon-left color="primary" (click)="voteUp(true)">
                <ion-icon name="thumbs-up"></ion-icon>
                Yes
              </button>
            </ion-col>
            <ion-col>
              <button ion-button clear small icon-left color="primary" (click)="voteUp(false)">
                <ion-icon name="thumbs-down"></ion-icon>
                No
              </button>
            </ion-col>
          </ion-row>
        </ion-card>
      </div>
      <p style="text-align: center; width: 100%;">{{ recentCard }}</p>
    </ion-content>

我的 home.page.ts 文件如下：

    import { Component, ViewChild, ViewChildren, QueryList } from '@angular/core';
    import { NavController } from '@ionic/angular';
    import { Http } from '@angular/http';
    import 'rxjs/Rx';

    import {
      StackConfig,
      Stack,
      Card,
      ThrowEvent,
      DragEvent,
      SwingStackComponent,
      SwingCardComponent
    } from 'angular2-swing';

    @Component({
      templateUrl: './home.page.html'
    })

    export class HomePage {
      @ViewChild('myswing1') swingStack: SwingStackComponent;
      @ViewChildren('mycards1') swingCards: QueryList<SwingCardComponent>;

      cards: Array<any>;
      stackConfig: StackConfig;
      recentCard: string = '';

      constructor(private http: Http) {
        this.stackConfig = {
          throwOutConfidence: (offsetX, offsetY, element) => {
            return Math.min(Math.abs(offsetX) / (element.offsetWidth / 2), 1);
          },
          transform: (element, x, y, r) => {
            this.onItemMove(element, x, y, r);
          },
          throwOutDistance: (d) => {
            return 800;
          }
        };
      }

      ngAfterViewInit() {
        // Either subscribe in controller or set in HTML
        this.swingStack.throwin.subscribe((event: DragEvent) => {
          event.target.style.background = '#ffffff';
        });

        this.cards = [{ email: '' }];
        this.addNewCards(1);
      }

      // Called whenever we drag an element
      onItemMove(element, x, y, r) {
        var color = '';
        var abs = Math.abs(x);
        let min = Math.trunc(Math.min(16 * 16 - abs, 16 * 16));
        let hexCode = this.decimalToHex(min, 2);

        if (x < 0) {
          color = '#FF' + hexCode + hexCode;
        } else {
          color = '#' + hexCode + 'FF' + hexCode;
        }

        element.style.background = color;
        element.style['transform'] = `translate3d(0, 0, 0) translate(${x}px, ${y}px) rotate(${r}deg)`;
      }

      // Connected through HTML
      voteUp(like: boolean) {
        let removedCard = this.cards.pop();
        this.addNewCards(1);
        if (like) {
          this.recentCard = 'You liked: ' + removedCard.email;
        } else {
          this.recentCard = 'You disliked: ' + removedCard.email;
        }
      }

      // Add new cards to our array
      addNewCards(count: number) {
        this.http.get('https://randomuser.me/api/?results=' + count)
          .map(data => data.json().results)
          .subscribe(result => {
            for (let val of result) {
              this.cards.push(val);
            }
          })
      }

      // http://stackoverflow.com/questions/57803/how-to-convert-decimal-to-hex-in-javascript
      decimalToHex(d, padding) {
        var hex = Number(d).toString(16);
        padding = typeof (padding) === "undefined" || padding === null ? padding = 2 : padding;

        while (hex.length < padding) {
          hex = "0" + hex;
        }

        return hex;
      }

    }

我的 home.module.ts 如下：

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { IonicModule } from '@ionic/angular';
    import { FormsModule } from '@angular/forms';
    import { RouterModule } from '@angular/router';

    import { HomePage } from './home.page';

    @NgModule({
      imports: [
        CommonModule,
        FormsModule,
        IonicModule,
        RouterModule.forChild([
          {
            path: '',
            component: HomePage
          }
        ])
      ],
      declarations: [HomePage]
    })
    export class HomePageModule {}

您可以关注 devdactic.com 在 IONIC 框架中制作 Tinder 卡。这是自 IONIC 2 以来的旧示例，但您的项目是 IONIC 4。我认为有很多差异和严格的规则。所以错误是：

1- ion-card是离子成分

2- 摇摆卡是 SwingCardComponent

两者都试图解析单个元素，并且在 IONIC 中不允许（也可能在 Angular 中）。

所以我改变了主页.html如下：

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <div swing-stack #myswing1 [stackConfig]="stackConfig" (throwoutleft)="voteUp(true)" (throwoutright)="voteUp(false)"
  id="card-stack">
  <div #mycards1 swing-card *ngFor="let c of cards">
      <ion-item *ngIf="c.picture">
          <ion-avatar item-left>
            <img *ngIf="c.picture" [src]="c.picture.medium">
          </ion-avatar>
          <h2>{{ c.name.first }} {{ c.name.last}}</h2>
          <p>{{ c.email }}</p>
      </ion-item>
      <ion-row *ngIf="c.location">
          From: {{ c.location.city }}, {{ c.location.postcode }}<br>
          Phone: {{ c.phone }}
        </ion-row>

        <ion-row *ngIf="c.name">
          <ion-col>
            <button ion-button clear small icon-left color="primary" (click)="voteUp(true)">
              <ion-icon name="thumbs-up"></ion-icon>
              Yes
            </button>
          </ion-col>
          <ion-col>
            <button ion-button clear small icon-left color="primary" (click)="voteUp(false)">
              <ion-icon name="thumbs-down"></ion-icon>
              No
            </button>
          </ion-col>
        </ion-row>
  </div>
</div>
<p style="text-align: center; width: 100%;">{{ recentCard }}</p>
</ion-content>

截屏：

希望这对您有帮助:) 您可以在这里找到更新的源代码开发策略滑动