[英]How to pass variable value from one component to another in angular 2
app.component.ts 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 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 workmat.component.ts
@Component({
moduleId: module.id,
selector: 'clock-workmat',
template: '<div>{{time}}</div>',
})
export class ClockWorkmat {
time:number;
}
i want to to take value of time from leftpanel.component.ts and assign to time in workmat.ts 我想从leftpanel.component.ts中获取时间值并分配给workmat.ts中的时间
can anyone please tell how to achieve it in simple way using angular 2 rc4. 谁能告诉我如何使用angular 2 rc4以简单的方式实现它。
Usage of directives
inside @Component
is deprecated now so it will give you error inside AppComponent
if you are using latest angular version. 现在已弃用
@Component
内directives
用法,因此如果您使用的是最新的角度版本,它将在AppComponent
内给您带来错误。
For your component communication i will advice you to use component communicate via a service in which you need to create one shared service. 对于组件通信,我建议您通过需要在其中创建一个共享服务的服务使用组件通信 。 you can also check my answer of parent-child or sibling component communication or gist .
您还可以检查我对亲子或同级组件通信或要点的回答。
If two children components of the parent "app" component need access to such a variable, I would originally aspire to keep all logic relating to this variable under the parent component, hence 'app' in your case. 如果父级“ app”组件的两个子级组件需要访问此类变量,我本来希望将与该变量相关的所有逻辑都保留在父级组件下,因此在您的情况下为“ app”。
If for some reason it conflicts with the design of your app and you most have this variable under leftpanel component then ther are various solutions to this problem. 如果由于某种原因它与您的应用程序设计冲突,并且您大多数将此变量放在左面板组件下,那么可以使用各种解决方案来解决此问题。
The easiest solution I see is to implement NgRedux and set it up in your project, by doing so you could dispatch an update to a certain state that holds record of this variable and gives easy access to it's value anywhere around your up easily bu subscribing to that certain state. 我看到的最简单的解决方案是实现NgRedux并在项目中对其进行设置,这样您就可以将更新分发到某个状态,该状态保存该变量的记录,并可以轻松访问其周围任何位置的值那个状态。
If you aren't famliar with NgRedux and want something less efficient but immediate you can do it the Angular way by importing these: Output, EventEmitter in your leftpanel comp, and emitting an event wherever neccesary(ngOnInit / on activation of a function, for example) and importing Input in your app component. 如果您不熟悉NgRedux并希望获得效率较低但需要立即完成的功能,则可以通过导入以下内容以Angular的方式进行操作:在左面板comp中导入Output,EventEmitter,并在需要的地方(ngOnInit /在激活功能时发出事件)示例),然后在应用程序组件中导入Input。 Naturally the parent will listen to this event and upon triggering will activate a function that for now will just update a private variable in 'app' comp, like so:
自然,父级将侦听此事件,并且在触发时将激活一个函数,该函数现在仅将更新“ app”组件中的私有变量,如下所示:
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() {}
}
And then under NgOnInit (Inside the LeftPanelComponent class) for example I emit the event with the time variable: 然后例如在NgOnInit(在LeftPanelComponent类内部)下,发出带有时间变量的事件:
ngOnInit() {
this.timeEvent.emit(time)
}
You Input the event like so: 您像这样输入事件:
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;
}
}
Once you have the variable in app comp you could Bind it to the workmat component like so: 将变量包含在app comp中后,可以将其绑定到workmat组件,如下所示:
[time]="time"
And in the template: 并在模板中:
template: `<leftpanel #src></leftpanel><workmat [time]="time"></workmat>`
Let me know if this helps you with the problem 让我知道这是否对您有帮助
So far I know two ways to do this. 到目前为止,我知道两种方法可以做到这一点。 One way is with a custom service, which is not simple, although it's a better way because services are generally used when you need to reuse data or logic across multiple components.
一种方法是使用自定义服务,这并不简单,尽管这是一种更好的方法,因为通常在需要跨多个组件重用数据或逻辑时才使用服务。
The Simple Way is through an "@Input() time: number" variable. 简单方法是通过“ @Input()时间:数字”变量进行。
Step 1: First create a method to get "time" in your leftpanel.component.ts file: 步骤1:首先创建一个方法,以在leftpanel.component.ts文件中获取“时间”:
export class ClockLeftPanel {
time:number=10;
getTime() : number {
return: this.time;
}
}
Step 2: Then, make the "template" in your leftpanel.component.ts like the following: 步骤2:然后,在leftpanel.component.ts中创建“模板”,如下所示:
template: `
<div class="show-time">{{time}}</div>
<clock-workmat [time]="getTime()"></clock-workmat>
`
which will nest the workmat.component with the leftpanel.component , allowing you to pass value from leftpanel.component to workmat.component . 这会将workmat.component与leftpanel.component嵌套在一起 ,从而允许您将值从leftpanel.component传递到workmat.component 。 Remember to use backticks (``) , not quotation marks (" " or ' ') because there is more than one line.
请记住使用反引号(``) ,而不是引号(“”或''),因为有多行。
Step 3: Next, in your workmat.component , you need to receive the value from the leftpanel.component with the @Input() decorator . 步骤3:接下来,在workmat.component中 ,您需要使用@Input()装饰器从leftpanel.component 接收值。 In your workmat.component.ts , do the following:
在您的workmat.component.ts中 ,执行以下操作:
import {Input} from '@angular/core';
...
export class ClockWorkmat {
@Input() time: number;
}
The above-given method can only go as far as where you are showing in your question. 上述方法只能到达问题中显示的位置。
If you want to use the value you got from leftpanel.component.ts Many Times Across Multiple Components , you need to use a custom service , which won't be so simple, but not too bad though. 如果要多次 使用 leftpanel.component.ts中的值跨多个组件 ,则需要使用自定义服务 ,它不会那么简单,但也不会太糟。 Actually, a service is very satisfying in many occasions.
实际上,服务在很多情况下都非常令人满意。
You need to create a shared service and inject it in the components you want to share data. 您需要创建一个共享服务,并将其注入要共享数据的组件中。 For the service to have a shared instance, it needs to be listed in the providers array of the module, your components are part of or a top level module.
为了使服务具有共享实例,需要在模块的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 { }
I'm not completely sure if this will work fine in Angular 2 rc4, but at least it should work with the latest release versions. 我不确定这是否可以在Angular 2 rc4中正常使用,但至少它应与最新发行版一起使用。 I think you could use template variables in your parent component to achieve what you want (eg. you assign the template name "src" [for instance] to your leftpanel, and then you set the time value with it in your workmat component as below):
我认为您可以在父组件中使用模板变量来实现所需的功能(例如,将模板名称“ src”(例如)分配给左面板),然后在workmat组件中使用它设置时间值,如下所示):
@Component({
moduleId: module.id,
selector: 'mx-itool-clock',
template: `<leftpanel #src></leftpanel><workmat [time]="src.time"></workmat>`,
directives: [ClockWorkmat,ClockLeftPanel]
})
import { Input } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'clock-workmat',
template: '<div>{{time}}</div>',
})
export class ClockWorkmat {
@Input() time:number;
}
And this should do the trick for a one shot assignment. 这应该可以完成一次射击任务。 Now if you want to continuously retrieve the time value from the leftpanel and assign it to your workmat instance, then you would have to introduce an EventEmitter in your LeftPanel component: see this page for more details
现在,如果要连续从左面板检索时间值并将其分配给工作垫实例,则必须在LeftPanel组件中引入EventEmitter:有关更多详细信息,请参见此页面
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.