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

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

孩子对父母：

为父级：

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>

并将其放在子component.ts中：

@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';

在这里阅读更多。