2017-04-12 6 views
0

私は子ルートを持つ親コンポーネントを持っています。私がしようとしているのは、それらの間でプロジェクト変数を共有することです。プロジェクトの価値は変わる可能性があり、変わるときに私はすべてのルートページを更新する必要があります。私はこれを達成する方法についてanuglar2 tutorialに従っています。しかし、最初に私のobservableを呼び出すときに問題が発生します。私はそれを初めて呼び出すとき、値が表示されませんが、私はそれを更新すると、値が表示されます。私はなぜプロジェクト変数が最初に価値を持っていないのか理解できませんでした。誰がこれがなぜで、どのように修正するのか知っていますか?Angular2 - サービスの初期コールがnullです。

(プロジェクトが設定して更新することができます)親ルート

onSubmit(value: any, valid: any) { 
    if (valid) { 
     // http request to get project 
     this.ad.searchProject(value) 
      .subscribe(
      response => { 
       // If projet found set value in service 
       this.ad.setProject(response); 
       // navigate to child rotue 
       this.router.navigate(['./project'], { relativeTo: this.route }); 
      }, 
      error => { 
       console.log(error) 
      }, 
      () => { 
       console.log("Project Loaded"); 
      } 
      ); 
    } 
} 

プロジェクトservice.ts

@Injectable() 
export class ProjectService { 
    public project: Project; 
    // Observable string sources 
    private projectSource = new Subject<Project>(); 
    // Observable string streams 
    projectListener$ = this.projectSource.asObservable(); 
    constructor(private http: Http) { 
    } 
    searchProject(value: string): Observable<any> { 
     return this.http.post('/controller/Project/SearchProject', { value: value }, { headers: headers }) 
      .map(response => response.json()); 
    } 
    // Service message commands 
    setProject(project: Project) { 
     this.projectSource.next(project); 
     console.log("call setProject"); 
    } 
} 

子ルート

export class ChildComponent { 
    project: Project = null; 
    subscription: Subscription; 
    constructor(private ad: ProjectService) { 
     console.log("call child route"); 
     this.subscription = this.ad.projectListener$.subscribe(
      value => { 
       // Called after second value is entered 
       console.log("call subscription"); 
       console.log(value); 
       this.project = value; 
      }); 
    } 
} 

にconsole.log

[HMR] connected 
call parent route 
Gravity_Project 
setProject 
Project Loaded 
call child route 
// done with first project entry 
Waves Project 
call subscription 
Object {id: 1001, typeID: 45004, studentID: 10000…} 
call setProject 
Project Loaded 
// done with second project entry 

答えて

1

解答行動件名です(https://hassantariqblog.wordpress.com/2016/12/03/angular2-difference-between-a-behavior-subject-and-an-observable/

「行動件名は、被写体の種類であるあなたが他のどのようなメッセージを購読することができますので、対象は、観察の特殊なタイプです観察可能である。行動対象のユニークな特徴は、次のものを受け取っていなくてもサブスクリプションに常に値を返さなければならないため、行動の主体は初期値を必要とします。 サブスクリプションでは、主題通常の観測可能なのは、いつでもonnext を受け取ったときにトリガされ、getValue()メソッドを使用して、観測不可能なコードでサブジェクトの最後の値を取り出すことができます。

+0

ありがとうございます。角度のある文書にはあなたの説明が含まれているはずです。 – John

+0

私は助けてうれしいです –

関連する問題