在离子4组分之间以不同模数传输变量

Question

配置：

enter image description here

所需的操作： 在主页上，显示候选人列表，单击候选人，然后在个人资料页面上显示其详细信息。

我希望将候选人表，候选人：正在将home.ts引导到我的profile.ts文件的候选人[]

HomePage组件和ProfilPage完全不同，并且模块不同。

父级关系=>子级不起作用，反之亦然。

而且我看不到如何使用服务，因为数据是在类的候选人.ts中声明的。

我在屏幕上输入了与两个文件有关的代码 谢谢您的配合，

import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
import { Candidat } from '../models/candidat';
import { NavController } from '@ionic/angular';


@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {

  candidats: Candidat[];

  constructor(public navCtrl: NavController) { }

  ngOnInit() {
    this.candidats = [
      new Candidat(
        '/assets/candidats/ghani-mahdi.jpg',
        'toto',
        'titi',
        57,
        'A',
        'organization',
        'tag',
        'biography',
        'electoralProgram',
        12,
        -6
      ),
      new Candidat(
        '/assets/candidats/nekkaz.jpg',
        'yoyo',
        'yiyi',
        30,
        'B',
        'organization',
        'tag',
        'biography',
        'electoralProgram',
        12,
        -6),
      new Candidat(
        '/assets/candidats/tahar-missoum.jpeg',
        'lolo',
        'lili',
        38,
        'C',
        'organization',
        'tag',
        'biography',
        'electoralProgram',
        12,
        -6
      )];
    console.log(this.candidats);
  }
  select() {
    console.log("c'est moi");
    this.navCtrl.navigateRoot('profil');
  }
}

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      A la une ...
    </ion-title>
  </ion-toolbar>
</ion-header>
https://stackoverflow.com/posts/54959666/edit#
<ion-content>

  <ion-card class="welcome-card" *ngFor='let candidat of candidats, let i=index' (click)='select()' >
    <ion-img src={{candidat.picture}}></ion-img>
    <ion-card-header>
      <ion-card-title>{{candidat.lastName}} {{candidat.firstName}}</ion-card-title>
      <ion-card-subtitle>{{candidat.old}} ans - {{candidat.nationality}}</ion-card-subtitle>
      <div>
        <p>{{candidat.organization}}</p>
        <p>{{candidat.tag}}</p>
      </div>
    </ion-card-header>
    <ion-card-content>
      <ion-icon name="thumbs-down" color="danger"></ion-icon>
      <ion-badge color="danger">{{candidat.negativeVote}}</ion-badge>

      <ion-icon name="thumbs-up" color="secondary"></ion-icon>
      <ion-badge color="secondary">{{candidat.positiveVote}}</ion-badge>
    </ion-card-content>

  </ion-card>
 
</ion-content>

import { Component, OnInit, Input } from '@angular/core';
import { HomePage } from '../home/home.page';
import { Candidat } from '../models/candidat';

@Component({
  selector: 'app-profil',
  templateUrl: './profil.page.html',
  styleUrls: ['./profil.page.scss'],
})
export class ProfilPage implements OnInit {

  @Input() candidats: Candidat[];


  constructor() { }
  ngOnInit() {
    console.log(this.candidats);
  }

}

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      Candidat
    </ion-title>
  </ion-toolbar>
</ion-header>


<ion-content padding >
    <ion-card class="welcome-card">

    <ion-img src="/assets/candidats/anonyme-user.jpg"></ion-img>

    <ion-card-header>
      <ion-card-title>Biographie: </ion-card-title>
      <div>
        <p>Lorem ipsum</p>
      </div>
      <ion-card-title>Programme éléctorale:</ion-card-title>
      <div>
        <p>Lorem Ipsum</p>
      </div>
    </ion-card-header>
    <ion-card-content>
      <ion-icon name="thumbs-down" color="danger"></ion-icon>
      <ion-badge color="danger">negativeVote</ion-badge>

      <ion-icon name="thumbs-up" color="secondary"></ion-icon>
      <ion-badge color="secondary">positiveVote</ion-badge>
    </ion-card-content>
  </ion-card>

</ion-content>

export class Candidat {
    constructor(
        public picture: string,
        public lastName: string,
        public firstName: string,
        public old: number,
        public nationality: string,
        public organization: string,
        public tag: string,
        public biography: string,
        public electoralProgram: string,
        public positiveVote: number,
        public negativeVote: number) {
    }
}

Files tree

home/home.html

home/home.ts (1)

home/home.ts (2)

profil/profil.html

profil/profil.ts