1. 首頁
  2. 問答
  3. Angular - 如何將變量從一個組件帶到另一個組件

Angular - 如何將變量從一個組件帶到另一個組件

2017-06-02 61 views
-1

我對Angular 4非常陌生，並且遇到了一些與我的程序有關的問題，並且能夠將一個變量從一個組件帶到另一個組件。我試圖將selectedEmployee變量從tracker.component.ts引入到我的summary.component.html文件中，並在記錄它的地方使用它。我的第一個想法是使用路線，但我不太清楚如何實現。任何幫助表示讚賞。謝謝！Angular - 如何將變量從一個組件帶到另一個組件

這裏是我的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>

這裏是我的蘇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;"> &#43; </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;"> &#8213; </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;"> &#8213; </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;"> &#61; </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;"> &#61; </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"> &#8213; </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"> &#61; </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>

再次感謝！

來源

2017-06-02 asdf

+2

https://angular.io/docs/ts/latest/cookbook/component-communication.html – jonrsharpe

回答

1

我注意到tracker.component.ts中的selectedEmployee與summary.component.ts中的不一樣。如果是這種情況，請在tracker.component.ts這是一個Input創建一個新變量。

@Input() employeeSelectedInSummary;

在my tracker.component.html做以下操作：

<pto-summary [employeeSelectedInSummary]="selectedEmployee"></pto-summary>

注：請確認您已經從@angular/core進口Input。

來源

2017-06-02 12:44:14 Nehal

+1

它應該是'@Input（）' – DGarvanski

+1

Opps，我會解決這個問題，謝謝:) – Nehal

+0

@Nehal works太棒了，非常感謝你！ – asdf

相關問題

 相關問題