在View中设置隐藏元素的值并将其发送到组件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值，并将其发送到组件，我已经读到角度1存在ng- value，仅用于从视图到组件的数据绑定的一种方式。我正在使用角度4并且我不知道要处理这个，我尝试过这样的事情：<input [(ngModel)]="role" value="{{myobject.role}}"/>但当然它不适用于ngModel我怎样才能将对象的属性值从视图发送到零件？

Answer 1

你可以使用[value]绑定值

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

Answer 2

好吧，阅读更多，灵感来自你的答案，我发现了一个很好的视频，涉及从视图到组件的数据绑定。我最终在我的html中执行此操作：

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

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

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

有效。

Answer 3

我不太确定我理解你要做什么，但你可以使用被调用的事件绑定

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