私たちがしたいことは、サイトの複数のセクションで使用できる2つの変数を返すURLからエンドポイントを呼び出すことです。私たちはhttp呼び出しを使用してそれに加入していますが、サイトを高速化するためにはapi呼び出しを一度しか行いません。これを行うために、私たちはaサービスでObservableを作成しました。サービスはObservableの値を設定するコンストラクタの関数を呼び出しますが、リンクを直接訪れたときにundefinedのメソッドにサブスクライブできない場合があります。これは、Microsoft ADALライブラリのコード例を使用していることは以下の通りです：角度2に観測変数を設定する
は、第一に、我々はサービスで観察として変数を設定している：
@Injectable()
export class MicrosoftGraphService {
public details: Observable<any>;
はその後、我々はコンストラクタで観察可能な値を設定されています。
constructor(
private _http:Http,
private _adalService: AdalService,
private _sanitizer:DomSanitizer
) {
this.getToken().subscribe(token => {
/**
* Get me data from graph to determine school_id and mis_id
*/
this.get('me', token, true).subscribe(me => {
this.details = new Observable(observer => {
observer.next({
me: me
});
observer.complete();
});
});
});
入手トークン機能は次のとおりです。
getToken(): Observable<any> {
return this._adalService
.acquireToken(this._adalService.config.endpoints.graph);
}
get関数は次のとおりです。
this._microsoftGraph.details.subscribe(details => {
console.log(details);
});
これのコンソールログを追加する必要があり、次のよう
get(endpoint, token, beta = false): Observable<any> {
return this._http.get(this._adalService.config.endpoints.graph +
this.getVersion(beta) + endpoint, {
headers: new Headers({ "Authorization": "Bearer " + token })
})
.map(res => {
return res.json();
});
}
これは、コンポーネントのコンストラクタで呼ばれていますしかし、私のエンドポイントの戻り値は、それが行う特定のページや、それを返す他のページでは未定義にサブスクライブできません。 MicrosoftGraphServiceが呼び出され、両方のページのコンストラクターで正しく設定されます。
これは、呼び出される方法と設定されたときに発生するかどうかは疑問です。ベースURLを訪問すると親コンポーネントが呼び出されます。コンストラクタでMicrosoftGraphServiceが呼び出されるため、最初に初期化されるため、ナビゲーションを通じて2番目のコンポーネントを参照するときに利用できます。ただし、子コンポーネントのURLの場所に直接移動すると、両方ともMicrosoftGraphServiceをロードしても、親の前に最初に呼び出されることがあります。ルートの
例は、それは場合に役立ちます：
const routes: Routes = [
{
path: '',
component: SiteComponent,
canActivate: [LoggedInGuard],
children: [
{ path: 'dashboard', component: DashboardComponent },
{ path: 'tasks', component: TasksComponent },
{
path: '',
redirectTo: '/dashboard'
, pathMatch: 'full'
// , terminal: true
}
]
},