Question

我在获取响应后在我的应用程序组件中调用api我可以决定显示哪个div以及要隐藏哪个div。但它在组件流程完成之前呈现html。下面是代码示例。

user.service.ts

import { Injectable } from '@angular/core';
import {Http,Headers, RequestOptions, Response, URLSearchParams} from '@angular/http';

@Injectable()
export class UserService {

  private static isUserLoggedIn: boolean = false;
  private userData: any;
  constructor(private http: Http) { }

  public isLoggedIn() {
    return UserService.isUserLoggedIn;
  }

  public getUserData() {
    return this.userData;
  }

  setUserData() {

    var url = 'http://api.example.in/user/logincheck';
    this.http
      .get(url)
      .map(response => response.json())
      .subscribe(
      (data) => {
        this.userData = data;
        if (typeof this.userData.id != 'undefined' && this.userData.id > 0) {
          UserService.isUserLoggedIn = true;
        }
      },
      (err) => { throw err; }
      );
  }

}

app.component.ts

import { Component, OnInit } from '@angular/core';
import { UserService } from './services/user/user.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [UserService],
})
export class AppComponent {
  constructor(private userService: UserService) {
    this.userLoggedInCheck();
  }

  ngOnInit() {

  }

  userLoggedInCheck() {
    this.userService.setUserData();
  }
}

我想在完成调用的userLoggedInCheck函数后加载html。

Answer 1

如果满足必要条件，则从 userLoggedInCheck 返回true值，并将其分配给app.component.ts文件中的变量。在html文件中，根据函数的返回变量将内容放在* ngIf中。

例如。

 userLoggedInCheck() {
    this.showHtml = this.userService.setUserData();
  }

和html

<div *ngIf="showHtml"> 
   ....... // code
</div>

在angular2中组件完成过程后渲染html

1 个答案: