手動でルートを入力するとサービス変数がリセットされる

Question

何が起こっているのかわからない。私はAngular 4でサイトを構築しています。ユーザー情報（ユーザー名、電子メールなど）を格納したサービス（シングルトン）を作成しました。 このゲットはプロフィールページに表示されます。

アンカータグ（Routerlinkを使用）をクリックして '/ profile'ルートに行くと、プロファイルページに行き、問題なくサービスからのユーザー情報を表示します。しかし、私は手動でURL 'Localhost：4200/profile'を入力するとプロフィールページに行きますが、ユーザー情報を表示するはずのすべてのフィールドは空です。 （値はnullです）。

私はここで行方不明のアンカーメカニックはありますか？なぜこうなった？ 手動でURLを入力してルータリンク経由でアクセスするのはどういう違いがありますか？

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 { } 

プロファイル（私はそれシングルトンインスタンスにするために、ここではプロバイダにユーザサービスを追加しました）。コンポーネント.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角度