Question

我正在关注this tutorial，并且在Ionic3和4之间的区别方面遇到了一些困难。我正在使用Ionic4，并且当我ionic serve都可以成功编译时，但是当我转到Web浏览器中，控制台中出现以下错误：

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 {}

Answer 1

您跟随devdactic.com在IONIC Framework中制作火种卡。这是自IONIC 2以来的旧示例，但是您的项目是IONIC4。我认为有很多差异和严格的规则。所以错误是：

1- 离子卡是离子成分

2- swing-card 是SwingCardComponent

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

所以我将 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">
  <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>

截屏：

希望这可以为您提供帮助：）您可以在devtactic-swipe

中找到更新的源代码。

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

1 个答案: