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没有＆＃39 ; t使用隐藏字段，因为它的目标是双向数据绑定，在这种情况下，我只想设置输入值（或任何类型的标记）的值role对象，并将其发送到组件，我已经读到角度1存在ng值，只有一种方式从视图到组件的数据绑定。我正在使用棱角分明4而且我不知道如何解决这个问题，我已经尝试过这样的事情：<input [(ngModel)]="role" value="{{myobject.role}}"/>但当然它不适用于{ngModel 1}}如何将对象的属性值从视图发送到组件？

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

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

3 个答案: