如何从一个组件到另一个组件获取价值？

Question

我有一个小项目正在工作，我需要从一个组件传递到另一文本（此信息是从数组传递的）。我应该能够单击一行并选择该值，以便以后可以使用编辑其参数，当我将两个.ts文件放在一个组件中时起作用，但是一旦我将它们拆分开，我就无法弄清楚了，因为我同时在屏幕上看到两个组件，如下所示……稍后数组上的内容将存储在MONGODB上。为该数组创建server.ts文件更有意义吗？如果可以的话，我该如何连接所有东西？

第一个被截断的代码来自我的子组件Listevent.component。

import {
  Component,
  OnInit
} from '@angular/core';

export interface PeriodicElement {
  date: number;
  club: string;
  name: number;
  flight: number;
  archers: number;
  scoring: number;
  awards: number;
}

const ELEMENT_DATA: PeriodicElement[] = [{
    date: 1288323623006,
    club: 'D',
    name: 1.0079,
    flight: 1,
    archers: 1,
    scoring: 1,
    awards: 0
  },
  {
    date: 1288323623006,
    club: 'Helium',
    name: 4.0026,
    flight: 2,
    archers: 2,
    scoring: 2,
    awards: 0
  },
  {
    date: 1288323623006,
    club: 'Lithium',
    name: 6.941,
    flight: 3,
    archers: 3,
    scoring: 3,
    awards: 0
  },
  {
    date: 1288323623006,
    club: 'Beryllium',
    name: 9.0122,
    flight: 1,
    archers: 4,
    scoring: 4,
    awards: 0
  },
  {
    date: 1288323623005,
    club: 'Boron',
    name: 10.811,
    flight: 3,
    archers: 5,
    scoring: 5,
    awards: 0
  },
  {
    date: 1288323630066,
    club: 'Carbon',
    name: 12.0107,
    flight: 2,
    archers: 6,
    scoring: 6,
    awards: 0
  },
  {
    date: 1288323623006,
    club: 'Nitrogen',
    name: 14.0067,
    flight: 1,
    archers: 7,
    scoring: 7,
    awards: 0
  },
  {
    date: 1288323630068,
    club: 'Oxygen',
    name: 15.9994,
    flight: 4,
    archers: 8,
    scoring: 8,
    awards: 0
  },
  {
    date: 1288323630069,
    club: 'Fluorine',
    name: 18.9984,
    flight: 5,
    archers: 9,
    scoring: 9,
    awards: 0
  },
  {
    date: 11288323230060,
    club: 'Neon',
    name: 20.1797,
    flight: 2,
    archers: 10,
    scoring: 10,
    awards: 0
  },
];
@Component({
  selector: 'app-listevent',
  templateUrl: './listevent.component.html',
  styleUrls: ['./listevent.component.scss']
})
export class ListeventComponent implements OnInit {

  displayedColumns: string[] = ['date', 'club', 'name', 'flight', 'archers', 'scoring', 'awards'];
  dataSource = ELEMENT_DATA;
  EventName: string;
  constructor() {}

  ngOnInit() {}
  onRowClicked(row) {
    console.log('Row clicked: ', row);
    this.EventName = row.name + ' - ( ' + row.club + ' ) ';
  }
}

<style>
  table {
    width: 100%;
  }
</style>
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <!-- Position Column -->
  <ng-container matColumnDef="date">
    <th mat-header-cell *matHeaderCellDef>
      <h2><b>Date</b></h2>
    </th>
    <td mat-cell *matCellDef="let element"> {{element.date | date:'yyyy-MM-dd Z'}} </td>
  </ng-container>
  <!-- Name Column -->
  <ng-container matColumnDef="club">
    <th mat-header-cell *matHeaderCellDef>
      <h2><b>Club</b></h2>
    </th>
    <td mat-cell *matCellDef="let element"> {{element.club}} </td>
  </ng-container>
  <!-- Weight Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef>
      <h2><b>Name</b></h2>
    </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>
  <!-- Symbol Column -->
  <ng-container matColumnDef="flight">
    <th mat-header-cell *matHeaderCellDef>
      <h2><b>Flight</b></h2>
    </th>
    <td mat-cell *matCellDef="let element"> {{element.flight}} </td>
  </ng-container>
  <ng-container matColumnDef="archers">
    <th mat-header-cell *matHeaderCellDef>
      <h2><b>Archers</b></h2>
    </th>
    <td mat-cell *matCellDef="let element"> {{element.archers}} </td>
  </ng-container>
  <ng-container matColumnDef="scoring">
    <th mat-header-cell *matHeaderCellDef>
      <h2><b>Scoring</b></h2>
    </th>
    <td mat-cell *matCellDef="let element"> {{element.scoring}} </td>
  </ng-container>
  <ng-container matColumnDef="awards">
    <th mat-header-cell *matHeaderCellDef>
      <h2><b>Awards</b></h2>
    </th>
    <td mat-cell *matCellDef="let element"> {{element.awards}} </td>
  </ng-container>
  <tr style="background-color: lightsteelblue; font-weight: bold" mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="onRowClicked(row)"></tr>
</table>

我的第二个组件是EventManagement.component。

import {
  Component,
  OnInit,
  ViewChild,
  AfterViewInit
} from '@angular/core';
import {
  ListeventComponent
} from './listevent/listevent.component';

@Component({
  selector: 'app-eventmanagement',
  templateUrl: './eventmanagement.component.html',
  styleUrls: ['./eventmanagement.component.scss']
})
export class EventmanagementComponent implements OnInit, AfterViewInit {
  constructor() {}
  EventName1: string;
  @ViewChild(ListeventComponent) child;
  ngOnInit() {
    this.EventName1 = 'test';
  }
  ngAfterViewInit() {
    this.EventName1 = this.child.EventName;
    console.log(this.child.EventName);
  }
}

<style>
  main {
    width: 90%;
    margin: auto;
  }
  
  .page mat-card-header {
    justify-content: center;
  }
  
  .Event mat-card-header {
    background-color: #00acc1;
    justify-content: left;
  }
  
  .Event mat-card-header a {
    margin: auto;
  }
  
  .eventbody mat-card-content a {
    margin: auto;
  }
  
  table {
    width: 100%;
    border: 1px solid black;
  }
  
  main mat-card {
    margin-top: 0.5rem;
  }
</style>
<main>
  <mat-card style="border-radius: 25px" class="Event">
    <mat-card-header style="border-radius: 25px">
      <a mat-raised-button color="accent"> Events </a>
      <a mat-raised-button color="primary"> Flights </a>
      <a mat-raised-button color="primary"> Archers </a>
      <a mat-raised-button color="primary"> Scoring Groups </a>
      <a mat-raised-button color="primary"> Manage </a>
      <a mat-raised-button color="primary"> Awards </a>
      <a mat-raised-button color="warn"> Question/Support </a>
    </mat-card-header>
  </mat-card>
  <mat-card style="border-radius: 25px" class="eventbody">
    <mat-card-header style="border-radius:25px; background-color: lightsteelblue">
      <h4>Event: [ {{EventName1}} ]</h4>
    </mat-card-header>
    <mat-card-content>
      <a mat-raised-button color="primary" style="border-radius:25px;"> Create </a>
      <a mat-raised-button color="primary" style="border-radius:25px;"> Edit </a>
      <a mat-raised-button color="primary" style="border-radius:25px;"> Clone </a>
      <a mat-raised-button color="warn" style="border-radius:25px;"> Cancel </a>
    </mat-card-content>
  </mat-card>
  <mat-card>
    <app-createevent></app-createevent>
  </mat-card>
  <mat-card style="border-radius: 25px">
    <app-listevent></app-listevent>

  </mat-card>
</main>

Answer 1

孩子对父母：

ParentComponent：

export class AppComponent implements AfterViewInit  {
  @ViewChild(ChildComponent) child;

  name = 'Angular';
  message = '';

  ngAfterViewInit() {
    this.message = this.child.message
  }
}

ChildComponent：

export class ChildComponent  {
  @Input() name: string;
  message = 'Hey! I am in ChildComponent :)';
}

这里是Stackblitz

对孩子的父母：

通过模板和@Input()将数据从父级传递到子级组件。

在父组件中：

<app-listevent [data]="data"></app-listevent>

并在子组件中获取它。

@Input('data') data;

不要忘记从Angular Core导入@Input()。

Answer 2

在子组件中，请确保使用@Input，如下所示：

导入：

import { Input } from '@angular/core';

在构造函数上方设置它：

@Input() someVariable;

也许在ngOnInit上使用它：

if (this.someVariable === undefined) this.someVariable = 'default value';

了解更多here。