Angular2：如何在第2页获取第1页的表单验证状态？

Question

我在项目中使用Angular 4.2.x，它有2个页面：第1页有一个表格，第2页是一个摘要页。

验证第 1 页上的所有字段后，我在两个页面共享的服务中存储一个 true 标志。我希望在加载第 2 页时显示此标志，但是，尽管第 1 页已将此变量标记为 true，但它始终为 false。

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);
         }
      });
   }
}

全球服务：

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 页是否完成？true”，但是当导航到第 2 页时，它显示“在第 2 页，第 1 页是否已完成？假".

有什么想法吗？谢谢！

Answer 1

您是否将 'GlobalService' 用作单例？如果你在 Page2Component 中导入它，它将创建一个新服务而不是一个单例，这将为你提供 'isPageCompleted' 的默认值，即 false。

而是将其导入到您的模块中，而不是组件中。

Answer 2

您一定已经在两个组件中创建了单独的服务实例（在两个组件中都使用了装饰性属性）。

仅创建单个实例（在模块中使用它而不是 class 作为提供者）。这应该可以解决您的问题。

Angular2：如何在第2页获取第1页的表单验证状态？

Angular2: How to get form validation status of page 1 on page 2?

angular2-forms

angular