Angular 静态组件在角度视图中未获得刷新

Angular 静态组件在角度视图中未获得刷新,angular,typescript,angular6,Angular,Typescript,Angular6,我有一个概要文件组件,它在页面上保持静态,只有用户登录时使用*ngIf时才可见,因此当用户登录时,我还调用概要文件组件的服务来获取用户详细信息,用于绑定的参数正在更新,但视图没有使用更新的值进行更新 例如,在调用登录服务后,用户名及其唯一id未绑定到视图 为了调用配置文件服务,我导入了配置文件组件ts 从'src/app/components/profile/profile.component'导入{ProfileComponent} 在登录组件中,已调用配置文件服务 this.getUserD

我有一个概要文件组件,它在页面上保持静态,只有用户登录时使用*ngIf时才可见,因此当用户登录时,我还调用概要文件组件的服务来获取用户详细信息,用于绑定的参数正在更新,但视图没有使用更新的值进行更新

例如,在调用登录服务后,用户名及其唯一id未绑定到视图

为了调用配置文件服务,我导入了配置文件组件ts

从'src/app/components/profile/profile.component'导入{ProfileComponent} 在登录组件中,已调用配置文件服务 this.getUserDetails('servicePath') 论登录服务的成功

此外,如果配置文件组件中的条件设置为true,*ngIf不会得到更新

请在这方面帮助我

配置文件TS代码

import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
import { Router } from '@angular/router';
import { ApiService } from 'src/app/service/api.service';
import { Http } from '@angular/http';
import { environment } from '../../../environments/environment';

@Component({
  selector: "app-points-block",
  templateUrl: './points-block.component.html',
  styleUrls: ['./points-block.component.css']

})
export class PointsBlockComponent implements OnInit {
  userProfileData : any = []; 
  constructor(private _router: Router, private http: Http,private apiService: ApiService) { 
  }

  ngOnInit() {
    this.getUserPoints(userPointsUrl);
  }

  /*** GET USER PROFILE POINTS ***/
  getUserPoints(userPointsUrl){

    this.apiService.postService(userPointsUrl, userProfileObj)
      .subscribe(
        response => {

          if (response.Code == 200) {
            this.userProfileData = response.Data[0];
          } else {
            this.userProfileData = response.Error;
          }
      });
  }
}
登录TS代码:

import { Component, OnInit } from '@angular/core';
import { ApiService } from 'src/app/service/api.service';
import { LoginService } from 'src/app/service/login.service';
import { Http } from '@angular/http';
import {Router, ActivatedRoute} from "@angular/router";
import {FormGroup, ReactiveFormsModule, FormBuilder, FormControl, Validators } from '@angular/forms';

import { AppComponent } from '../../app.component';
import { PointsBlockComponent } from 'src/app/components/points-block/points-block.component';

import { environment } from '../../../environments/environment';

@Component({
  providers:[PointsBlockComponent, PollsComponent, LeaderboardComponent],
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  constructor(private loginSerive: LoginService, private http: Http,private apiService: ApiService, private router: Router, private _appComp: AppComponent,
    private _pointBlockComp : PointsBlockComponent) { }

  ngOnInit() {

  /*** INITIAGE LOGIN FORM CONTROLLER ***/
  loginForm = new FormGroup({
    'username': new FormControl("john.Makwane02@postboxcommunications.com", [Validators.required]), 
    'password': new FormControl("User@1234", [Validators.required])
  });

  /*** SUBMIT LOGIN FORM ***/
  loginFromSubmit(){
    if (this.loginForm.valid) {
      let loginFromData = {
        "username": this.loginForm.controls['username'].value,
        "password": this.loginForm.controls['password'].value,
      }

      this.loginSerive.validateUser(environment.submitLoginForm, loginFromData)
      .subscribe(
        response => {
          if (response.Code == 200) {
              this._pointBlockComp.ngOnInit();
          }
        });
    }else{
      this.validateAllFormFields(this.loginForm);
    }
  }

}

首先,在另一个组件中提供一个组件是没有意义的。现在,由于我无法看到这两个元素的html,我假设您希望在用户登录后显示概要文件组件。在这种情况下,需要创建两条管线

export routes: Route[] = [
 {
   path: 'login',
   component: LoginComponent,
   canActivate: [AnonymousGuard] // This will be a service that implements CanActivate and return true only if the user is not logged in otherwise logged in user will also have access to the login router and that makes no sense.
 },
{
  path: 'profile',
  component: PointsBlockComponent,
  canActivate: [AuthGuard] // this will a service that will return true only when the user is logged in.
}
];

如果这不是用例,请告诉我,我将根据您的用例为您提供解决方案。

请分享一些代码。您能为此创建一个小型stackblitz吗?我已使用代码示例更新了问题。您好,配置文件组件是侧小部件,只调用一次,如果用户未登录,则不会显示给用户。一旦他登录到侧边栏,就可以看到更新的值。比如说,我们有一个登录页面,其中所有的数据都是可见的,如果用户想要与网站互动,他必须登录。然后,用户只能看到固定且不重新加载的侧杆。应用程序组件包含html“”,在这种情况下,您最好将项目中的模块AuthModule(所有未登录的相关内容)和DashboardModule(所有登录的相关内容)分开。边栏组件应该进入核心模块,如上面链接中所述。我想在阅读了上面的博客之后,你会对我想要表达的内容有更好的理解。很乐意帮忙!