Question

app.component.ts

@Component({
  moduleId: module.id,
  selector: 'mx-itool-clock',
  template: `<leftpanel></leftpanel><workmat></workmat>`,
  directives: [ClockWorkmat,ClockLeftPanel]
})

export class AppComponent{
}

leftpanel.component.ts

@Component({
  moduleId: module.id,
  selector: 'clock-leftpanel',
  template: `<div class="show-time">{{time}}</div>',
})
export class ClockLeftPanel {
    time:number=10;
}

workmat.component.ts

@Component({
    moduleId: module.id,
    selector: 'clock-workmat',
    template: '<div>{{time}}</div>',
})
export class ClockWorkmat {
  time:number;
}

我想从leftpanel.component.ts获取时间值并在workmat.ts中指定时间

任何人都可以告诉我们如何使用angular 2 rc4以简单的方式实现它。

Answer 1

现在不推荐在directives内使用@Component，因此如果您使用的是最新的角度版本，它会在AppComponent内给您错误。

对于您的组件通信，我建议您使用component communicate via a service来创建一个共享服务。你也可以检查一下我对parent-child or sibling component communication或gist的回答。

Answer 2

如果父“app”组件的两个子组件需要访问这样的变量，我原本希望在父组件下保留与此变量相关的所有逻辑，因此在您的情况下为“app”。

如果出于某种原因它与您的应用程序的设计发生冲突，并且您在leftpanel组件下大多数都有这个变量，那么这个问题就是各种解决方案。

我看到的最简单的解决方案是实施 NgRedux 并在项目中进行设置，这样做可以发送更新到某个状态保存了这个变量的记录，并且可以轻松访问它在你身边的任何地方的价值，轻松地订阅该特定状态。

如果你不熟悉NgRedux，并希望效率低下但是立即你可以通过导入这些来实现Angular方式：输出，左侧面板中的EventEmitter，并在必要时发出事件（ngOnInit / on a例如，在您的应用程序组件中导入输入。自然地，父母将听取此事件，并且在触发时将激活一个函数，现在只需更新'app'comp中的私有变量，如下所示：

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'letf-panel',
    template: ` 
               <div>Left Panel Content</div>
    `
})
export class LeftPanelComponent {
    @Output() timeEvent = new EventEmitter();

    constructor() {}
}

然后在NgOnInit（在LeftPanelComponent类内），例如我用时间变量发出事件：

ngOnInit() {
   this.timeEvent.emit(time)
}

您输入事件如下：

import { Component, Input } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'app',
    template: '<div (timeEvent)="getTime()"></div>',
})
export class AppComponent{

  @Input() time:number;
  private timeInApp;

  getTime(timeFromLeftPanel) {
      this.timeInApp = timeFromLeftPanel;
  }
}

在app comp中有变量之后，你可以将它绑定到workmat组件，如下所示：

[time]="time"

在模板中：

template: `<leftpanel #src></leftpanel><workmat [time]="time"></workmat>`

如果这可以帮助您解决问题，请告诉我

Answer 3

到目前为止，我知道两种方法可以做到这一点。一种方法是使用自定义服务，这并不简单，尽管这是一种更好的方法，因为服务通常在需要跨多个组件重用数据或逻辑时使用。

简单方法是通过“ @Input（）时间：数字”变量进行的。

第1步：首先创建一种方法，以在leftpanel.component.ts文件中获取“时间”：

      export class ClockLeftPanel {
          time:number=10;

          getTime() : number {
              return: this.time;
          }
      }

步骤2：然后，在leftpanel.component.ts中创建“模板”，如下所示：

      template: `
                <div class="show-time">{{time}}</div>
                <clock-workmat [time]="getTime()"></clock-workmat>
                `

会将 workmat.component 与 leftpanel.component 嵌套在一起，使您可以将值从leftpanel.component传递到workmat.component 。请记住使用反引号（``），而不是引号（“”或''），因为有多行。

第3步：接下来，在您的 workmat.component 中，您需要从 leftpanel.component 中接收值，并使用 @Input（）装饰器。在您的 workmat.component.ts 中，执行以下操作：

import {Input} from '@angular/core'; ... export class ClockWorkmat { @Input() time: number; }

上述方法只能到达问题中显示的位置。

如果您要使用从leftpanel.component.ts获得的值跨多个组件多次，则需要使用自定义服务，它不会那么简单，但也不会太糟。实际上，服务在很多情况下都非常令人满意。

Answer 4

您需要创建共享服务并将其注入要共享数据的组件中。要使服务具有共享实例，需要在模块的providers数组中列出，您的组件是顶级模块的一部分。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { 
    AppComponent,
    ClockLeftPanel,
    ClockWorkmat
} from './path';

@NgModule({
    imports: [...],
    exports: [...],
    providers: [
        YourService
    ],
    declarations: [
        ClockLeftPanel,
        ClockWorkmat,
        AppComponent
    ]
})
export class YourModule { }

Answer 5

我不完全确定这在Angular 2 rc4中是否可行，但至少它应该适用于最新版本。我认为您可以在父组件中使用模板变量来实现您想要的（例如，您将模板名称“src”[例如]分配给您的左侧面板，然后在您的workmat组件中设置时间值，如下所示）：

在app.component.ts中：

@Component({
  moduleId: module.id,
  selector: 'mx-itool-clock',
  template: `<leftpanel #src></leftpanel><workmat [time]="src.time"></workmat>`,
  directives: [ClockWorkmat,ClockLeftPanel]
})

workmat.component.ts

import { Input } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'clock-workmat',
    template: '<div>{{time}}</div>',
})
export class ClockWorkmat {
  @Input() time:number;
}

这应该是一次性任务的诀窍。现在，如果您想连续从leftpanel检索时间值并将其分配给您的workmat实例，那么您必须在LeftPanel组件中引入EventEmitter：有关更多详细信息，请参阅this page

如何在角度2中将变量值从一个组件传递到另一个组件

5 个答案: