重新加载页面使变量在Angular中未定义

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

@Injectable()
export class VariableService {
  public myVariable: any;
}

import { Component } from '@angular/core';
import { VariableService } from './variable.service';

@Component({
  selector: 'app-example',
  template: `
    <div>{{ variableService.myVariable }}</div>
    <button (click)="updateVariable()">Update Variable</button>
  `
})
export class ExampleComponent {
  constructor(private variableService: VariableService) {}

  updateVariable() {
    this.variableService.myVariable = 'Updated value';
  }
}

// 存储变量的值
localStorage.setItem('myVariable', 'Variable value');

// 获取变量的值
const myVariable = localStorage.getItem('myVariable');

// 定义路由
const routes: Routes = [
  { path: 'example/:myVariable', component: ExampleComponent }
];

// 在组件中访问路由参数
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-example',
  template: `
    <div>{{ myVariable }}</div>
  `
})
export class ExampleComponent implements OnInit {
  myVariable: any;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.myVariable = this.route.snapshot.params['myVariable'];
  }
}