Electron + Angular 4 =データバインディングが2通りありません

Question

私たちはUIを更新するたびに、直感的ではなく、より多くの繰り返しを加えるように強制するため、zone.run（）メソッドとこれをオプションで使用する必要があります。コード。

ここに私たちの主な依存関係：

"dependencies": { 
"@angular/animations": "4.0.0", 
"@angular/common": "4.0.0", 
"@angular/compiler": "4.0.0", 
"@angular/compiler-cli": "4.0.0", 
"@angular/core": "4.0.0", 
"@angular/forms": "4.0.0", 
"@angular/http": "4.0.0", 
"@angular/platform-browser": "4.0.0", 
"@angular/platform-browser-dynamic": "4.0.0", 
"@angular/platform-server": "4.0.0", 
"@angular/router": "4.0.0", 
"@angular/upgrade": "4.0.0", 
"@types/electron": "^1.4.34", 

ここに私たちのindex.htmlの抜粋：ここ

<!-- 1. Load libraries --> 
<script src="../node_modules/zone.js/dist/zone.js"></script> 
<script src="../node_modules/reflect-metadata/Reflect.js"></script> 
<script src="../node_modules/systemjs/dist/system.src.js"></script> 

<!-- 2. Configure SystemJS --> 
<script src="systemjs.config.js"></script> 
<script> 
    System.import('app').catch(function(err){ console.error(err); }); 
</script> 

systemjs.config.js関連部分

(function (global) { 
System.config({ 
    paths: { 
     // paths serve as alias 
     'npm:': '../node_modules/' 
    }, 
    // map tells the System loader where to look for things 
    map: { 
     // our app is within the app folder 
     app: 'app', 

     // angular bundles 
     '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
     '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
     '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
     '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 
     '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 
     '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
     '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
     '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js', 
     '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 
     '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js', 
     '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js', 

     // other libraries 
     'ng2-translate': 'npm:ng2-translate/bundles', 
     'rxjs': 'npm:rxjs', 
     'underscore.string': 'npm:underscore.string/dist', 
     'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js' 
    }, 

いいえクロームのdevのコンソール内で報告されたエラーがないが、動作していない問題があるW：

• 404は非常にすべてのファイルが正しく予想されるためにダウンロードされているJSなしのhttpは（当時のindex.htmlから始まるすべて.jsはscriptsタグを参照し、すべての.jsファイルはsystem.config.jsで参照されます）
• 2ウェイデータバインディングが機能していないため、コンポーネントコンストラクタ内にzone.jsを注入してrun（） UIで更新を強制するメソッド

その他の関連ソースは、コンポーネントとhtml

です

コンポーネントとそのテンプレートです（期待しているフィールドの中にタイプします）form.value |入力テキストの内容を 'ライブ' を表示するには、JSON）

import { Component, OnInit, NgZone } from '@angular/core'; 
 
import { Router } from '@angular/router'; 
 

 
import { AuthenticationService, ILoginAjaxResponse } from './service/authentication.service'; 
 

 
export class Credentials { 
 
    email: string; 
 
    password: string; 
 
} 
 

 
@Component({ 
 
    selector: 'as-login', 
 
    templateUrl: 'app/login/login.component.html', 
 
}) 
 
export class LoginComponent implements OnInit { 
 
    credentials = new Credentials(); 
 

 
    constructor(
 
     private authenticationService: AuthenticationService, 
 
     private router: Router, 
 
     private zone: NgZone) { 
 
    } 
 

 
    public ngOnInit() { 
 
     // Test A 
 
     // ------------------------------- 
 
     // this is visible in UI text box 
 
     // this is visible in the UI {{credentials | json}} output 
 
     // this is NOT visible in the UI {{form.value | json}} output 
 
     this.credentials.email = 'john.doe@planet.com'; 
 

 
     // Test B 
 
     // ------------------------------- 
 
     // this is NOT visible in UI text box 
 
     // this is NOT visible in the UI {{credentials | json}} output 
 
     // this is NOT visible in the UI {{form.value | json}} output 
 
     setTimeout(() => { 
 
      this.credentials.email = '11111111@planet.com' 
 
     }, 3000); 
 

 
     // Test C 
 
     // ------------------------------- 
 
     // this is visible in UI text box 
 
     // this is visible in the UI {{credentials | json}} output 
 
     // this is visible in the UI {{form.value | json}} output 
 
     setTimeout(() => { 
 
      this.zone.run(() => { 
 
       this.credentials.email = '22222222@planet.com' 
 
      }); 
 
     }, 6000); 
 
    } 
 

 
    public onSubmit() { 
 
     this.authenticationService.login(this.credentials) 
 
      .subscribe((response) => this.handleResponse(response)); 
 
    } 
 

 
    private handleResponse(response: ILoginAjaxResponse) { 
 
     this.router.navigateByUrl('spa/sync') 
 
      .catch((reason) => { console.log(reason); }); 
 
    } 
 

 
}

<p>Form:</p> 
 
<pre> 
 
{{ form.value | json }} 
 
</pre> 
 

 
<p>Model:</p> 
 
<pre> 
 
{{ credentials | json }} 
 
</pre> 
 

 
<form #form="ngForm" novalidate> 
 
    <input type="text" class="form-control" 
 
     name="email" [(ngModel)]="credentials.email"> 
 

 
    <input type="password" class="form-control" 
 
     name="password" [(ngModel)]="credentials.password"> 
 

 
    <input class="btn btn-lg btn-primary btn-block" 
 
     (click)="onSubmit()" 
 
     type="submit" value="Submit"> 
 
</form>

Answer 1

が最後に修正を発見しました。これは、私が元々疑っていたように、index.html内の注文やインポートやタグとは関係ありません。 これはThis issue causing angular to drop out the zoneに関連しています。だから解決策は、問題回避策で述べたZone.current.wrapを使うことでした...