在视图中设置隐藏元素的值并将其发送到组件Angular 2

Question

假设我有一个对象，我正在我的视图中读取对象属性。有一个名为 role 的对象的属性，我想将该值从我的视图发送到我的组件，我需要在我的组件中使用该值做一些工作...

这是我的服务：

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

@Injectable()
export class Globals {
    role: string = 'test role';
}

这是我的组件：

import { Component } from '@angular/core'    
import { Globals } from './globals'

@Component({
    selector: 'component2',
    template: `
    <div>          
<input [(ngModel)]="role"/>
      <button (click)="changedRole()">apply</button>
    </div>`
})
export class Component2 {
    private role: string;

    constructor(private globals: Globals) {
        this.role = globals.role;
    }

    private changedRole() {
        this.globals.role = this.role;
    }
}

现在，有些事情，我对显示 role 值不感兴趣，所以我猜在隐藏输入中会更好，我读过 ngModel 不适用于隐藏字段，因为它的目标是双向数据绑定，在这种情况下，我只想使用对象的 role 值设置输入（或任何类型的标签）的值，并将其发送到组件，我读到 angular 1 存在 ng-value，仅用于从视图到组件的一种数据绑定方式。我正在与 angular 4 合作，但我不知道如何处理这个问题，我尝试过这样的事情：<input [(ngModel)]="role" value="{{myobject.role}}"/> 但当然它不适用于 ngModel 如何我可以将对象的属性值从视图发送到组件吗？

Answer 1

可以使用[value]绑定值

<input  [value]="role" type="hidden" />

Answer 2

我不太确定我理解你想要做什么，但你可以使用名为

的事件绑定

<input (change)="role = $event.value" [value]="role" />

Answer 3

好吧，阅读更多内容，受到您的回答的启发，我在 pluralsight 中找到了一个关于从视图到组件的数据绑定的不错的视频。我最终在 html:

中这样做了

 <a (click)="select(person.role)">{{person.Title}}</a>

在我的组件中，我刚刚添加了这个方法：

select(role: string) {
        console.log('the role selected was: ' + role);
    }

成功了。

在视图中设置隐藏元素的值并将其发送到组件Angular 2

Set value of hidden element in View and send it to component Angular 2

angular2-forms

angular2-directives

angular