Блог

Главная - Вопросы по программированию - Угловой sidenav, похоже, обновляется при каждом нажатии на ссылку

Угловой sidenav, похоже, обновляется при каждом нажатии на ссылку

#angular #angular-material

Вопрос:

Начальное представление-это компонент входа в систему. Как только пользователь входит в систему, он перенаправляется в компонент «главная страница». Компонент Home имеет верхнюю панель инструментов, а также боковую навигацию. Sidenav содержит ссылки, по которым пользователь может перейти. При нажатии на ссылки sidenav, похоже, не полностью завершает анимацию «подсветки», но, похоже, обновляет всю страницу. Это проиллюстрировано в примере StackBlitz, при нажатии между двумя ссылками вы можете увидеть, как анимация останавливается/обновляется. Начальный вид с кнопкой настроен таким образом, чтобы имитировать перенаправление входа в систему. Спасибо за любой вклад.

Ссылка на StackBlitz https://stackblitz.com/edit/angular-ivy-bamdb4?file=src/app/home/home.component.html

Комментарии:

1. Это интересно, я понимаю, о чем вы говорите, но я не вижу такого же поведения в stackblitz

2. Хм, я вижу это со своей стороны. Когда вы нажимаете ссылку/вкладку, угловая анимация должна воспроизводиться плавно. Однако в данном случае это не так. Кажется, его прервали. Вы можете увидеть его полностью анимированным, если вы уже находитесь по этой ссылке, и нажмите ее еще раз. Но при нажатии на эту ссылку появится сообщение об ошибке. Если это имеет смысл 🙂

3. В каком браузере вы видите проблему?

4. Версия Chrome 91.0.4472.124

Ответ №1:

Причина этого в том, что при навигации вы заменяете всю страницу целиком. Вы можете легко отладить это, если поместите простое утверждение в home.component.ts файл что-то вроде:

   ngOnInit() {
    console.log('jancsi '   Math.random());
  }

если вы будете открывать консоль каждый раз при навигации, вы увидите новую запись.

Способ настройки маршрутизации вызывает это, поскольку у вас есть маршруты верхнего уровня для: dashboard и userprofile

Попробуйте настроить его следующим образом (истинные дочерние маршруты дома) маршрут:

   {
    path: 'home',
    component: HomeComponent,

    children: [
      {
        path: 'userprofile',
        component: UserProfileComponent
      },
      {
        path: 'dashboard',
        component: DashboardComponent
      }
    ]
  },

Также измените ссылку на маршрут (удалите / косую черту), чтобы она выглядела так:

   <a mat-list-item routerLink="dashboard">First Component</a>
  <a mat-list-item routerLink="userprofile">Second Component</a>

анимация не будет прервана, и не будет никакого нового ngOnInit вызова HomeComponent

Проверьте этот Стекблитц

Комментарии:

1. Большое вам спасибо, это решило проблему. Я сделал вывод на консоль только для того, чтобы посмотреть, сколько раз вызывается oninit (), и заметил, что он вызывался несколько раз. Просто не был уверен, как это решить. Похоже, что правильная настройка дочерних компонентов устраняет проблему. Огромное спасибо.

Метки: , ,