Question

我不知道发生了什么。我在Angular 4中构建了一个站点。我创建了一个服务（Singleton），其中存储了用户信息（用户名，电子邮件等）。此摘要显示在个人资料页面上。

当我去＆＃39; / profile＆＃39;通过单击锚标记（使用Routerlink）进入路径，它将转到配置文件页面，并显示用户信息（来自服务），没有任何问题。但是，当我手动输入网址＆＃39; Localhost：4200 / profile＆＃39;它转到配置文件页面，但是应该显示用户信息的所有字段都是空的。（值为null）。

是否有一位我在这里失踪的角色机械师？为什么会这样？手动输入网址和通过路由器链接到达那里的区别是什么？

User.service.ts

import { Injectable } from '@angular/core';

@Injectable()
export class UserService {

  public username;
  public role;
  public token;
  public firstname;
  public lastname;
  public organisation_id;
  private profilePicture = '../../assets/Images/No_user_image.jpg';


  constructor() { }


    clearUser() {
    this.username = null;
    this.role = null;
    this.token = null;
    this.firstname = null;
    this.lastname = null;
    this.organisation_id = null;
  }

}

App.module.ts（我已在此处向提供商添加了用户服务，以使其成为单例实例）

// Imports
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule }    from '@angular/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';
import {NgxPaginationModule} from 'ngx-pagination';
import { HttpClientModule, HttpClient} from "@angular/common/http";
import { NgxDatatableModule } from '@swimlane/ngx-datatable';

// Components
import { AppComponent } from './app.component';
import { ContentComponent } from './content/content.component';
import { OrganisationComponent } from './organisation/organisation.component';
import { LicenseComponent } from './license/license.component';
import { MainMenuComponent } from './main-menu/main-menu.component';
import { LogsComponent } from './logs/logs.component';
import { CommunityComponent } from './community/community.component';
import { ProfileComponent } from './profile/profile.component';
import { SignupComponent } from './auth/signup/signup.component';
import { SigninComponent } from './auth/signin/signin.component';
import { HeaderComponent } from './header/header.component';
import { LandingPageComponent } from './landing-page/landing-page.component';

// Services
import { AuthGuard } from './auth/auth-guard.service';
import { GlobalService } from './global.service';
import { AuthService } from './auth/auth.service';
import { UserService } from './auth/user.service';
import { DatabaseApiService } from './api/database-api.service';
import { ContentDetailComponent } from './content-detail/content-detail.component';
import { XdashtableComponent } from './xdashtable/xdashtable.component';
import { EditableFieldComponent } from './editable-field/editable-field.component';
import { AdminPanelComponent } from './admin-panel/admin-panel.component';
import { AccessDeniedComponent } from './access-denied/access-denied.component';



// If all roles can access a route, do not add the data parameter.
// If a select few roles can access a route, specify them in the data parameter.
const appRoutes: Routes = [
  { path: '', component: MainMenuComponent, canActivate: [AuthGuard]},
  { path: 'Forbidden', component: AccessDeniedComponent, canActivate: [AuthGuard]},
  { path: 'Content', component: ContentComponent, canActivate: [AuthGuard] },
  { path: 'Content/:id', component: ContentDetailComponent, canActivate: [AuthGuard] },
  { path: 'Organisations', component: OrganisationComponent, canActivate: [AuthGuard] },
  { path: 'Organisations/:id', component: OrganisationComponent, canActivate: [AuthGuard] },
  { path: 'Licenses', component: LicenseComponent, canActivate: [AuthGuard] },
  { path: 'Licenses/:id', component: LicenseComponent, canActivate: [AuthGuard] },
  { path: 'Logs', component: LogsComponent, canActivate: [AuthGuard] },
  { path: 'Community', component: CommunityComponent, canActivate: [AuthGuard] },
  { path: 'Profile', component: ProfileComponent, canActivate: [AuthGuard] },
  { path: 'Signup', component: SignupComponent },
  { path: 'Login', component: SigninComponent },
  { path: 'Landing', component: LandingPageComponent},
  { path: 'Adminpanel', component: AdminPanelComponent, canActivate: [AuthGuard], data: {roles: ['Admin', 'Head Admin']}},
  { path: '**', component: MainMenuComponent , canActivate: [AuthGuard]}, // Page not Found
];





@NgModule({
  declarations: [
    AppComponent,
    ContentComponent,
    OrganisationComponent,
    LicenseComponent,
    MainMenuComponent,
    LogsComponent,
    CommunityComponent,
    ProfileComponent,
    SignupComponent,
    SigninComponent,
    HeaderComponent,
    LandingPageComponent,
    ContentDetailComponent,
    XdashtableComponent,
    EditableFieldComponent,
    AdminPanelComponent,
    AccessDeniedComponent,

  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    NgxPaginationModule,
    FormsModule,
    HttpModule,
    ReactiveFormsModule,
    RouterModule.forRoot(appRoutes),
    NgxDatatableModule,

  ],
  providers: [GlobalService, AuthGuard, AuthService, UserService, DatabaseApiService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Profile.component.ts

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

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class ProfileComponent implements OnInit {


  constructor(private userService: UserService) { }

  ngOnInit() {

  }

}

Answer 1

存储在服务存储器中的数据是临时的，在刷新时会丢失。当您手动路由到配置文件页面时，数据会在路由刷新时丢失。

为避免这种情况，您有很多选择。

1]实现一些服务器端功能，以便您在路由导航中获取数据。

2]使用浏览器本地存储来存储数据，并根据您的要求从本地存储中检索。

标准localStorage

example角度为

手动键入路径时重置服务变量

1 个答案: