javascriptまたはjqueryで要素値を変更した後のangular2コンポーネントモデルの変更

Question

スクリプトでは、jquery（javascriptと同じ）を使用して要素の値を変更しますが、この要素に接続されたモデルは変更されませんでした。

<input type="text" class="form-control" id="username" placeholder="Username" [(ngModel)]="user.username"> 

私は手動でそのモデルが更新されるaswell値を変更します。ここでは、この要素です。それは何でしょうか？

おかげ

Answer 1

Seの例ここplunker

：

親コンポーネント：

import { Comp1Component } from './../comp1/comp1.component'; 
import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'app-comp-parent', 
    template:` 
     <p>ngModel: {{sharedVarParent}}</p> 
     <app-comp1 [comp1]="sharedVarParent" (sharedVarChange)="onChange($event)"></app-comp1> 
     <hr /> 
     <app-comp2 [comp2]="sharedVarParent" (sharedVarChange)="onChange($event)"></app-comp2> 
    ` 
}) 
export class CompParentComponent implements OnInit { 
    sharedVarParent ='Initial'; 
    onChange(ev){ 
     this.sharedVarParent = ev; 
    } 
} 

COMP1：

import { Component, OnInit, Input, Output,EventEmitter } from '@angular/core'; 

@Component({ 
    selector: 'app-comp1', 
    template:` 
     <input type="text" id="username" placeholder="{{comp1}}" [ngModel]="comp1" (ngModelChange)="change($event)"> 
     <div>{{comp1}}</div>` 
}) 
export class Comp1Component implements OnInit { 
    @Input() comp1; 
    @Output() sharedVarChange = new EventEmitter(); 
    change(newValue) { 
    this.comp1 = newValue; 
    this.sharedVarChange.emit(newValue); 
    } 
} 

器Comp2

import { Component, OnInit, Input, Output,EventEmitter } from '@angular/core'; 

@Component({ 
    selector: 'app-comp2', 
    template:` 
    <input type="text" id="username" placeholder="{{comp2}}" [ngModel]="comp2" (ngModelChange)="change($event)"> 
    <div>{{comp2}}</div> 
    ` 
}) 
export class Comp2Component implements OnInit { 
    @Input() comp2; 
    @Output() sharedVarChange = new EventEmitter(); 
    change(newValue) { 
    this.comp2 = newValue; 
    this.sharedVarChange.emit(newValue); 
    } 
}