Установите значение скрытого элемента в представлении и отправьте его компоненту Angular 2.

Допустим, у меня есть объект, я читаю свойства объекта в своем представлении. Существует свойство объекта с именем 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- значение только для одностороннего связывания данных из представления с компонентом. Я работаю с угловым 4, и я не знаю, как с этим справиться, я пробовал что-то вроде этого: <input [(ngModel)]="role" value="{{myobject.role}}"/> но, конечно, это не работает с ngModel как я могу отправить значение свойства объекта из представления в составная часть?


angular angular2-forms angular2-directives
person AlexGH    schedule 19.12.2017    source источник
comment
Почему вы хотите ввести скрытый ввод? Вы всегда можете получить значение, используя this.globals.role   -  person Eliseo    schedule 19.12.2017

Ответы (3)


arrow_upward
2
arrow_downward

вы можете использовать [value] для привязки значения

<input  [value]="role" type="hidden" />
person Arun Kumaresh    schedule 19.12.2017

arrow_upward
0
arrow_downward

Что ж, читая дальше, вдохновленный вашими ответами, я нашел хорошее видео во множественном числе о привязке данных из представления к компоненту. В итоге я сделал это в своем html:

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

И в моем компоненте я просто добавил этот метод:

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

Это сработало.

person AlexGH    schedule 19.12.2017

arrow_upward
-1
arrow_downward

Я не совсем уверен, что понимаю, что вы пытаетесь сделать, но вы можете использовать привязку события, называемую

<input (change)="role = $event.value" [value]="role" />
person phillip chiarato    schedule 19.12.2017