Перезагрузите компонент Angular 6 после входа в систему

#angular

Вопрос:

У меня есть меню, которое должно быть обновлено после входа пользователя в систему. Меню добавлено в HTML-код app.component.

Меню генерируется с использованием следующего кода.

 <li *ngFor="let item of menuitems">
     <a class="nav-link" [routerLink]="[item.url]" routerLinkActive="active" {{item.name}}</a>
</li>

Пункты меню меняются после входа пользователя в систему. Я хотел бы принудительно перезагрузить страницу (в идеале только этот компонент), когда пользователь входит в систему. Когда я выполняю обновление вручную, я получаю новое меню.

Компонент добавляется к основному компоненту. С помощью

 <app-menu></app-menu>

Элементы меню определяются следующим образом;

 async ngOnInit() {
     this.menuitems = await this.menus.getMenu();
}

Служба меню возвращает элементы, если пользователь вошел в систему или нет.

Я предполагаю, что мне нужно обновить компонент меню после успешного входа в систему, но я не знаю, как это можно сделать.

1. Куда вы кладете свой login page/component ?

2. Как вы регистрируете пользователя? Вам просто нужно обновить меню в этой функции.

3. Я использую компонент входа в систему, который, если пользователь принимает токен, сохраняется в локальном хранилище. Я понимаю, что мне нужно его обновить, мне было интересно, как это можно сделать. Есть ли функция, которую мне нужно вызвать?

Ответ №1:

это может быть самый простой способ, просто используйте * ngIf , чтобы показать или скрыть элемент, каждый раз, когда вы переключаете состояние, компонент будет воссоздан и ngOninit будет запускаться снова

примерный пример

шаблон

 <div>
  <button (click)="login()">login 👮‍♂️</button>
</div>

компонент

 toggle = true;

  constructor(private m:MenuService) {

  }

  login(){
    console.log('logging');
    this.toggle = false;

    this.m.menus = ['admin','log out']; // update menus result
    setTimeout(() => this.toggle = true,1500); // api call 💣
  }

демонстрация stackblitz 🚨🚨

1. Как мне принудительно переключить этот компонент после входа в систему?

2. @Atletekristiansen Я добавил демонстрационную версию, которая имитирует ваш случай 👍

3. это «обычный» способ переключения между двумя меню?

4. Я не понял, что ты сказал 🙄🙄 ??

5. Мне было интересно, является ли это обычным способом отображения одного из N различных меню. Если пользователь вошел в систему, появится меню, основанное на уровне этого пользователя, с помощью этого решения я мог бы заставить его работать, просто переключая разные меню, но мне было интересно, является ли это обычным способом выполнения такой операции.

Ответ №2:

Если у компонента есть какой-либо входной параметр, передаваемый из родительского компонента, который изменяется при успешном входе в систему, тогда вы можете реализовать необходимость в интерфейсе onChanges для определения события ngOnChanges, которое будет выполняться при изменении входного параметра.

 async ngOnChanges() {
this.menuitems = await this.menus.getMenu();
}