수동으로 경로를 입력 할 때 서비스 변수가 재설정 됨

Question

나는 무슨 일이 일어나는지 전혀 모른다. Angular 4로 사이트를 만들고 있습니다. 내부에 사용자 정보 (사용자 이름, 이메일 등)가 저장된 서비스 (싱글 톤)를 만들었습니다. 이 정보가 프로필 페이지에 표시됩니다.

라우터 링크를 사용하여 앵커 태그를 클릭하여 '/ profile'경로로 이동하면 프로필 페이지로 이동하여 문제없이 서비스의 사용자 정보를 표시합니다. 그러나 수동으로 url 'Localhost : 4200/profile'을 입력하면 프로필 페이지로 이동하지만 사용자 정보를 표시해야하는 모든 입력란은 비어 있습니다. (값은 널입니다).

내가 여기에없는 앵글 메카닉이 있습니까? 왜 이런 일이 일어 났습니까? 수동으로 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 각도