Question

我对Angular 4很陌生，我的程序遇到了一些问题，并且能够将变量从一个组件带到另一个组件。我试图将来自tracker.component.ts的selectedEmployee变量带到我的summary.component.html文件中，并在我记录的地方使用它。我的第一个想法是使用路线，但我不太确定如何实现。任何帮助表示赞赏。谢谢！

这是我的tracker.component.ts：

＆＃13;

|Column1  | Column2|
|row1Val1 | row1Va2|
|row2Val1 | row2Va2|
|row3Val1 | row3Va2|
|row4Val1 | row4Va2|

＆＃13;

这是我的tracker.component.html：

＆＃13;

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

＆＃13;

这是我的summary.component.ts：

＆＃13;

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

＆＃13;

这是我的summary.component.html：

＆＃13;

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

＆＃13;

再次感谢！

Answer 1

我注意到selectedEmployee中的tracker.component.ts与summary.component.ts中的tracker.component.ts类型不同。如果是这种情况，请在Input中创建一个@Input() employeeSelectedInSummary;的新变量。

my tracker.component.html

在<pto-summary [employeeSelectedInSummary]="selectedEmployee"></pto-summary>中执行以下操作：

Input

注意：确保您已从@angular/core导入embed/video_id。

Angular - 如何将变量从一个组件带到另一个组件

1 个答案: