Question

我正在使用服务通过参数步骤开发Angular 6。

在构造函数方法中，我调用以下服务（app.component.ts）：

constructor(private userService: UserService) {
      this.menuService.getDataRegister(this.aliasUser)
      .subscribe(
        data => {
          if(data == 1) {
            this.userService.setPage(1);
            this.page = this.userService.getPage();
            console.log('page1: ', this.page);
          } else {
            this.userService.setPage(0);
            this.page = this.userService.getPage();
          }
        }, // Bind to view
        error => {
          // Log errors if any
          this.processError(error);
        });

        console.log('page2: ', this.page);

    }
  }

console.log“ page1”的值向我显示了预期的内容，但是console.log“ page2”的值却未定义，并且该值应保留，因为它是相同的变量并将其加载到答案中，确定服务。

然后当我尝试在另一个组件中拾取它时，它也会加载未定义的内容（home.component.ts）：

this.page = this.userService.getPage();
console.log('page: ', this.page);

可能是什么问题？谢谢，

Answer 1

执行console.log('page2: ', this.page)时，this.menuService.getDataRegister的结果尚不可用。 console.log的执行顺序为：

console.log（'page2：'，this.page）;
console.log（'page1：'，this.page）;

您只能在订阅中使用this.page

Answer 2

您的实现看起来不错。您无需访问页面console.log('page2: ', this.page);，因为一旦调用API响应值，您迟早就会拥有该值。

只需阅读一下异步调用，您就会知道它是如何工作的。

constructor(private userService: UserService) {
      this.menuService.getDataRegister(this.aliasUser)
      .subscribe(
        data => {
          if(data == 1) {
            this.userService.setPage(1);
            this.page = this.userService.getPage();
            console.log('page1: ', this.page);
          } else {
            this.userService.setPage(0);
            this.page = this.userService.getPage();
          }
        }, // Bind to view
        error => {
          // Log errors if any
          this.processError(error);
        });

        console.log('page2: ', this.page); // No need to check page here and you should not be bothered about this even.

    }
  }

Angular 6-使用服务传递参数

2 个答案: