2017-07-27 41 views
0

我在項目中使用Angular 4.2.x,它有兩個頁面:頁面1有一個窗體,頁面2是一個摘要頁面。Angular2:如何獲得頁面2頁面1的表單驗證狀態?

一旦頁面1上的所有字段都得到驗證,我就會在兩個頁面共享的服務中存儲一個真正的標誌。我希望在加載頁面2時顯示此標誌,但是,儘管頁面1已將此變量標記爲true,但它始終爲假。

Page1Component:

export class Page1Component implements OnInt { 
    ngOnInit() { 
     this.form1.valueChanges.subscribe(changes => { 
     if (this.form1.invalid) { 
      this.globalService.updatePageStatus(false); 
     } else { 
      this.globalService.updatePageStatus(true); 
     } 
     }); 
    } 
} 

GlobalService:

export class GlobalService { 
    isPageCompleted: false; 

    updatePageStatus(isCompleted: boolean) { 
    this.isPageCompleted = isCompleted; 
    console.log("Is page 1 completed? " + this.isPageCompleted); 
    } 
} 

Page2Component:

export class Page2Component implements OnInit { 
    isPage1Completed = false; 

    ngOnInit() { 
     this.isPage1Completed = this.globalService.isPageCompleted; 
     console.log("On page 2, is page 1 completed? " + this.isPage1Completed); 
    } 
} 

而且Page1Component和Page2Component在不同的模塊,其是延遲裝入。在瀏覽器控制檯中,我可以看到「正在完成頁面1?真正」,但是當瀏覽到頁面2時,它顯示「在頁面2上,頁面1是否完成?false」。

有什麼想法?謝謝!

回答

1

您必須一直在您的組件中創建單獨的服務實例(在兩個提供程序裝飾屬性中使用它)。

只創建一個實例(在模塊中使用它,而不是類作爲提供者)。這應該可以解決你的問題。

0

您是否使用'GlobalService'作爲單身?如果你在Page2Component中導入它,它會創建一個新的服務,而不是一個單例,它會給你默認的'isPageCompleted'值,這是false。

取而代之只是將它導入到你的模塊中,而不是在組件中。