-1
私はAngular 4の新機能で、プログラムに問題があり、あるコンポーネントから別のコンポーネントに変数を持ち込むことができます。私はtracker.component.tsからselectedEmployee変数を私のsummary.component.htmlファイルに持ってきて、それを文書化した場所で使用しようとしています。私の最初の考えはルートを使用することですが、私はそれをどのように実装するかについてはあまりよく分かりません。どんな助けもありがとうございます。ありがとう！ここで角度 - あるコンポーネントから別のコンポーネントに変数を持ち込む方法
は私のtracker.component.tsです：
import { Component, OnInit } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { SummaryComponent } from './summary.component';
import { EmpInfoService } from './emp-info.service';
import { EmpInfo } from './emp-info';
@Component({
selector: 'pto-tracker',
templateUrl: `./tracker.component.html`,
styleUrls: ['./tracker.component.css']
})
export class TrackerComponent implements OnInit{
empInfo: EmpInfo[];
isHidden: boolean = false;
public selectedEmployee: number;
constructor(private empInfoService: EmpInfoService) { }
getEmpInfo(): void {
this.empInfoService.getEmpInfos().then(
empInfo => this.empInfo = empInfo
);
}
ngOnInit(): void {
this.getEmpInfo();
}
toggleSummary(): void {
this.isHidden = !this.isHidden;
}
}は、ここに私のtracker.component.htmlです：
<div class="row">
<div [ngClass]="{'col-xs-12':isHidden === true, 'col-xs-7': isHidden !== false}" style="background-color:red;">
<button class="form-control" style="width:150px;" (click)="toggleSummary();gotoSummary()">Open Summary</button>
<select id="empName" [(ngModel)]="selectedEmployee">
<option selected="selected" disabled>Employee Name...</option>
<option *ngFor="let emp of empInfo; let i = index" [value]="i">{{i}} - {{emp.EmpID}}</option>
</select>
<select id="PTOtype">
<option selected="selected" disabled>Type of PTO...</option>
<option value="PTO">PTO</option>
<option value="ETO-Earned">ETO - Earned</option>
<option value="ETO-Used">ETO - Used</option>
<option value="STDLTD">STD/LTD</option>
<option value="Uncharged">Uncharged</option>
</select>
<h2 *ngIf="empInfo && empInfo.length > selectedEmployee">{{empInfo[selectedEmployee].FirstName}}</h2>
</div>
<div *ngIf="isHidden" class="col-xs-5">
<pto-summary></pto-summary>
</div>
</div>は、ここに私のsuですmmary.component.ts：
import { Component, OnInit } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { EmpInfoService } from './emp-info.service';
import { TrackerComponent } from './tracker.component';
import { EmpInfo } from './emp-info';
@Component({
selector: 'pto-summary',
templateUrl: `./summary.component.html`,
styleUrls: ['./summary.component.css']
})
export class SummaryComponent implements OnInit{
empInfo: EmpInfo[];
selectedIndex = 4;
selectedEmployee: EmpInfo;
timeVar = " hours";
checkboxValue = false;
constructor(private empInfoService: EmpInfoService) { }
getEmpInfo(): void {
this.empInfoService.getEmpInfos().then(
empInfo => this.empInfo = empInfo
);
}
ngOnInit(): void {
this.getEmpInfo();
}
onSelect(empInfo: EmpInfo): void {
this.selectedEmployee = empInfo;
}
changeTime(): void {
if (!this.checkboxValue)
{
this.timeVar = " hours"
this.empInfo[this.selectedIndex].STDLTD = this.empInfo[this.selectedIndex].STDLTD * 8;
this.empInfo[this.selectedIndex].Uncharged = this.empInfo[this.selectedIndex].Uncharged * 8;
this.empInfo[this.selectedIndex].PTOBase = this.empInfo[this.selectedIndex].PTOBase * 8;
this.empInfo[this.selectedIndex].PTOCarry = this.empInfo[this.selectedIndex].PTOCarry * 8;
this.empInfo[this.selectedIndex].PTOBorrowed = this.empInfo[this.selectedIndex].PTOBorrowed * 8;
this.empInfo[this.selectedIndex].PTOBalance = this.empInfo[this.selectedIndex].PTOBalance * 8;
this.empInfo[this.selectedIndex].PTORequests = this.empInfo[this.selectedIndex].PTORequests * 8;
this.empInfo[this.selectedIndex].PTORemaining = this.empInfo[this.selectedIndex].PTORemaining * 8;
this.empInfo[this.selectedIndex].ETOEarned = this.empInfo[this.selectedIndex].ETOEarned * 8;
this.empInfo[this.selectedIndex].ETORequests = this.empInfo[this.selectedIndex].ETORequests * 8;
this.empInfo[this.selectedIndex].ETORemaining = this.empInfo[this.selectedIndex].ETORemaining * 8;
}
else
{
this.timeVar = " days"
this.empInfo[this.selectedIndex].STDLTD = this.empInfo[this.selectedIndex].STDLTD/8;
this.empInfo[this.selectedIndex].Uncharged = this.empInfo[this.selectedIndex].Uncharged/8;
this.empInfo[this.selectedIndex].PTOBase = this.empInfo[this.selectedIndex].PTOBase/8;
this.empInfo[this.selectedIndex].PTOCarry = this.empInfo[this.selectedIndex].PTOCarry/8;
this.empInfo[this.selectedIndex].PTOBorrowed = this.empInfo[this.selectedIndex].PTOBorrowed/8;
this.empInfo[this.selectedIndex].PTOBalance = this.empInfo[this.selectedIndex].PTOBalance/8;
this.empInfo[this.selectedIndex].PTORequests = this.empInfo[this.selectedIndex].PTORequests/8;
this.empInfo[this.selectedIndex].PTORemaining = this.empInfo[this.selectedIndex].PTORemaining/8;
this.empInfo[this.selectedIndex].ETOEarned = this.empInfo[this.selectedIndex].ETOEarned/8;
this.empInfo[this.selectedIndex].ETORequests = this.empInfo[this.selectedIndex].ETORequests/8;
this.empInfo[this.selectedIndex].ETORemaining = this.empInfo[this.selectedIndex].ETORemaining/8;
}
}
}、ここでは私のsummary.component.htmlです：再び
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title pull-left" *ngIf="empInfo && empInfo.length > selectedEmployee">{{empInfo[selectedEmployee].LastName | uppercase}} Summary</h3>
<div style="float: right;">
<div class="onoffswitch">
<input [(ngModel)]="checkboxValue" (change)="changeTime()" type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="panel-body">
<form class="form-horizontal" role="form" style="overflow-x:auto;">
<fieldset>
<div class="col-xs-6">
<div class="form-group" *ngIf="empInfo && empInfo.length > selectedEmployee">
<label class="col-xs-5"> Status </label>
<div class="col-xs-7">
<select class="form-control" id="empStatus" [(ngModel)]="empInfo[selectedEmployee].EmpStat" name="empStatus">
<option value="Current">Current</option>
<option value="Terminated">Terminated</option>
</select>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group" *ngIf="empInfo && empInfo.length > selectedEmployee">
<label class="col-xs-5"> Anniversary </label>
<div class="col-xs-7">
<input class='form-control' type="text" id="empAnniversary" [(ngModel)]="empInfo[selectedEmployee].Anniversary" name="empAnniversary"/>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group" *ngIf="empInfo && empInfo.length > selectedEmployee">
<label class="col-xs-5"> Start Date </label>
<div class="col-xs-7">
<input class='form-control' type="text" id="empStartDate" [ngModel]="empInfo[selectedEmployee].StartDate | date: 'MM/dd/y'" name="empStartDate"/>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group" *ngIf="empInfo && empInfo.length > selectedEmployee">
<label class="col-xs-5"> Adjusted Start </label>
<div class="col-xs-7">
<input class='form-control' type="text" id="empAdjustedStart" [ngModel]="empInfo[selectedEmployee].AdjustedStart | date: 'MM/dd/y'" name="empAdjustedStart"/>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group" *ngIf="empInfo && empInfo.length > selectedEmployee">
<label class="col-xs-5"> STD/LTD </label>
<div class="col-xs-7">
<input class='form-control' type="text" id="empSTDLTD" [(ngModel)]="empInfo[selectedEmployee].STDLTD + timeVar" name="empSTDLTD"/>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group" *ngIf="empInfo && empInfo.length > selectedEmployee">
<label class="col-xs-5"> Uncharged </label>
<div class="col-xs-7">
<input class='form-control' type="text" id="empUncharged" [(ngModel)]="empInfo[selectedEmployee].Uncharged + timeVar" name="empUncharged"/>
</div>
</div>
</div>
</fieldset>
<fieldset>
<h4>PTO</h4>
<br />
<div class="col-xs-12">
<div class="form-group" *ngIf="empInfo && empInfo.length > selectedEmployee">
<div class="col-xs-1"></div>
<label class="col-xs-2"> Base </label>
<div class="col-xs-3">
<input class='form-control' type="text" id="ptoBase" [(ngModel)]="empInfo[selectedEmployee].PTOBase + timeVar" name="ptoBase"/>
</div>
<div class="col-xs-6">
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group" *ngIf="empInfo && empInfo.length > selectedEmployee">
<label class="col-xs-2" style="font-weight: bold;"> + </label>
<label class="col-xs-4"> Carryover </label>
<div class="col-xs-6">
<input class='form-control' type="text" id="ptoCarry" [(ngModel)]="empInfo[selectedEmployee].PTOCarry + timeVar" name="ptoCarry"/>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group" *ngIf="empInfo && empInfo.length > selectedEmployee">
<div class="col-xs-1"></div>
<label class="col-xs-4"> Balance </label>
<div class="col-xs-6">
<input class='form-control' type="text" id="ptoBalance" [(ngModel)]="empInfo[selectedEmployee].PTOBalance + timeVar" name="ptoBalance"/>
</div>
<div class="col-xs-1"></div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group" *ngIf="empInfo && empInfo.length > selectedEmployee">
<label class="col-xs-2" style="font-weight: bold;"> ― </label>
<label class="col-xs-4"> Borrowed </label>
<div class="col-xs-6">
<input class='form-control' type="text" id="ptoBorrowed" [(ngModel)]="empInfo[selectedEmployee].PTOBorrowed + timeVar" name="ptoBorrowed"/>
</div>
</div>
<hr style="border: solid 1px black;border-bottom:1px solid black;clear:both" />
</div>
<div class="col-xs-6">
<div class="form-group" *ngIf="empInfo && empInfo.length > selectedEmployee">
<label class="col-xs-1" style="font-weight: bold;"> ― </label>
<label class="col-xs-4"> Requests </label>
<div class="col-xs-6">
<input class='form-control' type="text" id="ptoRequests" [(ngModel)]="empInfo[selectedEmployee].PTORequests + timeVar" name="ptoRequests"/>
</div>
<div class="col-xs-1"></div>
</div>
<hr style="border: solid 1px black;border-bottom:1px solid black;clear:both" />
</div>
<div class="col-xs-6">
<div class="form-group" *ngIf="empInfo && empInfo.length > selectedEmployee">
<label class="col-xs-2" style="font-weight: bold;"> = </label>
<label class="col-xs-4"> Balance </label>
<div class="col-xs-6">
<input class='form-control' type="text" id="ptoBalance" [(ngModel)]="empInfo[selectedEmployee].PTOBalance + timeVar" name="ptoBalance"/>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group" *ngIf="empInfo && empInfo.length > selectedEmployee">
<label class="col-xs-1" style="font-weight: bold;"> = </label>
<label class="col-xs-4"> Available </label>
<div class="col-xs-6">
<input class='form-control' type="text" id="ptoRemaining" [(ngModel)]="empInfo[selectedEmployee].PTORemaining + timeVar" name="ptoRemaining"/>
</div>
<div class="col-xs-1"></div>
</div>
</div>
</fieldset>
<fieldset>
<h4>ETO</h4>
<br />
<div class="col-xs-6">
<div class="form-group" *ngIf="empInfo && empInfo.length > selectedEmployee">
<div class="col-xs-2"></div>
<label class="col-xs-4"> Earned </label>
<div class="col-xs-6">
<input class='form-control' type="text" id="etoEarned" [(ngModel)]="empInfo[selectedEmployee].ETOEarned + timeVar" name="etoEarned"/>
</div>
</div>
<div class="form-group" *ngIf="empInfo && empInfo.length > selectedEmployee">
<label class="col-xs-2"> ― </label>
<label class="col-xs-4"> Requests </label>
<div class="col-xs-6">
<input class="form-control" type="text" id="etoRequests" [(ngModel)]="empInfo[selectedEmployee].ETORequests + timeVar" name="etoRequests"/>
</div>
</div>
<hr style="border: solid 1px black;border-bottom:1px solid black;clear:both" />
<div class="form-group" *ngIf="empInfo && empInfo.length > selectedEmployee">
<label class="col-xs-2"> = </label>
<label class="col-xs-4"> Available </label>
<div class="col-xs-6">
<input class='form-control' type="text" id="etoRemaining" [(ngModel)]="empInfo[selectedEmployee].ETORemaining + timeVar" name="etoRemaining"/>
</div>
</div>
</div>
<div class="col-xs-6"></div>
</fieldset>
</form>
</div>
</div>ありがとう！
https://angular.io/docs/ts/latest/cookbook/component-communication.html – jonrsharpe