如何從一個組件到另一個組件獲取價值？

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

在這里閱讀更多。