我有一个小项目正在工作,我需要从一个组件传递到另一文本(此信息是从数组传递的)。我应该能够单击一行并选择该值,以便以后可以使用编辑其参数,当我将两个.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>
答案 0 :(得分: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()
。
答案 1 :(得分:0)
在子组件中,请确保使用@Input
,如下所示:
导入:
import { Input } from '@angular/core';
在构造函数上方设置它:
@Input() someVariable;
也许在ngOnInit
上使用它:
if (this.someVariable === undefined) this.someVariable = 'default value';
了解更多here。