私は現在RC.4で動作しているアプリケーションをRC.5にアップグレードしています。古いFormsディレクティブの使用を中止し、NgModuleを使用してアプリケーションを起動するように更新しました。RC.5の.subcribe（）でChangeDetectionがトリガーされていませんか？
しかし、私はすぐに私のアプリが大部分の情報をajax呼び出しによって読み込むために問題に遭遇しました。私はこれらのObservablesを購読し、常にRC.4のようなデータをコンポーネントに入れます。通常の行は次のようになります。
api.GoGetData().subscribe((data) => this.myData = data);
RC4ではこれは問題なく動作しました。 RC.5が稼働しているので、このバインドされたデータを表示するためにViewが更新されていないことがわかりました。 Chromeの開発ツールでは、私は、要求が行われていることを見ていると私は上記の行を更新する場合：
api.GoGetData().subscribe((data) => {
this.myData = data;
debugger;
});
それから私は、ブレークポイントを打っていると私は、データを正しく見ることができます。
私が手動でダニのために呼び出す必要がありそうです：
constructor(api: Api, appref: ApplicationRef) {
...
this.api.GoGetData().subscribe((data) => {
this.myData = data;
appref.tick();
});
...
}
私は変化検出を強制し、私のUIが適切に更新され、それを行う場合。これはうまくいくかもしれませんが、Angular2の方法ではできません。
Angular2 RC.5で、HttpリクエストのObservableのsubscribeコールバックからコンポーネント変数を変更すると、Change Detectionが起動する必要がありますか？
編集：私は既存のコードを大量に削除しました。これを試してみてください。ここで私は今持っているものです。
index.htmlを
<html>
<body>
<app>Loading</app>
<script src="app/lib/es6-shim.min.js"></script>
<script src="app/lib/zone.min.js"></script>
<script src="app/lib/Reflect.js"></script>
<script src="app/lib/system-polyfills.js"></script>
<script src="app/lib/system.js"></script>
<script src="app/systemjs.config.js"></script>
<script>
System.import('app/boot').catch(function(err){ console.error(err); });
</script>
</body>
</html>
boot.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { TestComponent } from './components/test';
import { TestApi } from './components/testapi';
@NgModule({
imports: [ BrowserModule, HttpModule ],
declarations: [ TestComponent ],
providers: [ TestApi ],
bootstrap: [ TestComponent ]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
test.ts
import { Component } from '@angular/core';
import { TestApi } from './testapi';
@Component({
selector: 'app',
template: 'TEST<br/><br/>{{ myData }}'
})
export class TestComponent {
myData: any;
constructor(private api: TestApi) {
this.api.GoGetData().subscribe(data => {
this.myData = data;
console.log(this.myData);
});
}
}
testapi.ts
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
@Injectable()
export class TestApi {
constructor(private http: Http) { }
GoGetData() {
return this.http.get('test.txt').map(res => res.text());
}
}
systemjs.config.js
(function(global) {
var ngVer = '@2.0.0-rc.5'; // lock in the angular package version; do not let it float to current!
// var routerVer = '@3.0.0-rc.1'; // lock router version
var formsVer = '@0.3.0'; // lock forms version
//map tells the System loader where to look for things
var map = {
'app': 'app',
'@angular': 'https://npmcdn.com/@angular', // sufficient if we didn't pin the version
'rxjs': 'https://npmcdn.com/[email protected]'
};
//packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' }
};
var ngPackageNames = [
'common',
'compiler',
'core',
'http',
'forms',
'platform-browser',
'platform-browser-dynamic',
];
// Add map entries for each angular package
// only because we're pinning the version with `ngVer`.
ngPackageNames.forEach(function(pkgName) {
var url = pkgName;
switch (pkgName) {
case 'forms':
url += formsVer;
break;
default:
url += ngVer;
break;
}
map['@angular/'+pkgName] = 'https://npmcdn.com/@angular/' + url;
});
// Add package entries for angular packages
ngPackageNames.forEach(function(pkgName) {
// Bundled (~40 requests):
packages['@angular/'+pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
});
var config = {
map: map,
packages: packages
};
System.config(config);
})(this);
これは今狂気私を運転しています！私はtest.txtに "Hello from server！"と書いてあります。コンソールには問題なく表示されますが、ページにはTESTしか表示されません。エラーや警告はありません。コメントのyurzuiのplnkrは私のために働いていますが、自分のコードはありません。
あなたは 'HTTP_PROVIDERS'または新しい' HttpModule'を使っていますか？ 2つ目は私のために変更検出を修正しました。 – Philipp
@Philipp私のモジュールでは、私は 'HttpModule'を使用しています。私のプロジェクト全体では、HTTP_PROVIDERSへの参照はありません。 –
これはうまくいくはずですhttps://plnkr.co/edit/0BPsJDYRdEPussAsMbCD?p=preview – yurzui