Question

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

一旦验证了第1页上的所有字段，我就会在两个页面共享的服务中存储一个真正的标志。我希望在加载页面2时显示此标志，但是，尽管页面1已将此变量标记为真，但它始终为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);
         }
      });
   }
}

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位于延迟加载的不同模块中。在浏览器控制台中，我可以看到＆＃34; 是否已完成第1页？是的＆＃34;，但是当导航到第2页时，它会显示＆＃34; 在第2页，是否已完成第1页？假＆＃34;

有什么想法吗？谢谢！

Answer 1

您必须在两个组件中创建单独的服务实例（在两者中的提供者装饰属性中使用它）。

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

Answer 2

您使用的是＆＃39; GlobalService＆＃39;作为一个单身人士？如果你在Page2Component中导入它，它将创建一个新服务，而不是一个单例，它将为你提供你的默认值＃is; isCoCompleted＆＃39;这是假的。

而是只在模块中导入它，而不是在组件中导入。

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

2 个答案: