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

Question

I have a small project working and i need to pass from one component to another text ( this information is passed from an array ).I should be able to click on a row and select that value so that i can then later on edit its parameters, which worked when i have the two .ts files in one component but as soon as i split them out then i cant figure it out as i am having both components on the screen the same time as seen below... later on the array will be stored on MONGODB. would it make more sense to create a server.ts file for the array? if so how would i then connect every thing?

The first code sniped is from my child component called 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> 

My second component is 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

Child to Parent:

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 :)';
}

Here is the Stackblitz

Parent to Child:

Pass data to your child component from parent through template and @Input() .

In the parent component:

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

And get it in the child component.ts:

@Input('data') data;

Do not forget to import the @Input() from Angular Core.

Answer 2

In your child component, make sure to use @Input , like so:

Import:

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

Set it, above the constructor function:

@Input() someVariable;

Use it, perhaps on ngOnInit :

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

Read more here .