angular - 在不同模块中的离子 4 组件之间传输变量

Question

配置：

在此处输入图像描述

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

我希望将候选人表，候选人：正在启动 home.ts 的候选人 [] 传输到我的 profile.ts 文件

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

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

而且我看不到如何使用服务，因为数据是在作为类的 Candidate.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) {
    }
}

文件树

主页/home.html

主页/home.ts (1)

主页/home.ts (2)

简介/profil.html

简介/profil.ts

标签： angulartypescriptionic-frameworkangular-components