как передать данные при переходе к другому компоненту

#angular #routes

#angular #маршруты

Вопрос:

Мне нужно перейти к Comp B из Comp A одним нажатием кнопки, во время навигации я хотел передать данные о номере сотрудника в Comp B. Я не хочу формат URL строки запроса из-за проблемы безопасности (не должен быть похож на app / structure / profile / 12345)

как перемещаться по Comp B путем передачи данных.

Комп HTML-код:

 <button class="btn btn-outline-primary " routerLink="/structure/profile">View profile</button>

То, что я пробовал, это:

 <button class="btn btn-outline-primary " (click)="OpenTheProfile(object.Emp_no)">View profile</button>

  OpenProfile(emp_no){
  this.router.navigate(['/structure/profile'],{ state: { example: 'emp_no' } });

но эти данные исчезнут после обновления страницы, я хочу сохранить данные, так как добиться этого в Angular

Ответ №1:

Если вы хотите, чтобы данные были там после обновления страницы, вы должны использовать localStorage для их сохранения.

 OpenProfile(emp_no) {
      localStorage.setItem('emp_no', emp_no);
      this.router.navigate(['/structure/profile']);
    }

Затем в Comp B получаем значение из localStorage

 ngOnInit() {
      const empNo = localStorage.getItem('emp_no');
    }

1. Я пробовал с localstorage, он работает.. Спасибо, Окан Асланкан

2. если это работает для вас, не могли бы вы отметить как правильный ответ

3. уже сделано, но из-за проблемы с репутацией голосование не будет отображаться публично.

Ответ №2:

Вы можете настроить данные для отправки при определении маршрутов:

 const routes: Routes = [
  {
    path: 'structure/profile'
    data: { example: 'emp_no' },
    component: ProfileComponent
  }
]

При переходе к «структуре / профилю» эти данные отправляются, и вы можете подписаться на ProfileComponent:

 this.route.data.subscribe(data => {
  this.example = data['example'];
});

Если это динамические данные, вам необходимо создать распознаватель и, например, извлечь данные с помощью некоторого вызова службы:

 @Injectable()
export class ExampleResolver implements Resolve<ExampleData> {
  constructor(private exampleService: ExampleService, private router: Router) {}

  resolve(route: ActivatedRouteSnapshot): Observable<ExampleData> {
    return  this.exampleService.getExampleData();
  }       
}

и снова вам нужно подписаться this.route.data на ProfileComponent.