Блог

Главная - Вопросы по программированию - Как вы реализуете индикатор выполнения поездки пользователя в Angular?

Как вы реализуете индикатор выполнения поездки пользователя в Angular?

#html #css #angular #typescript #user-interface

#HTML #css #angular #typescript #пользовательский интерфейс

Вопрос:

Я новичок в Angular, поэтому я просмотрел документацию и пример кода. Но я не понимаю, как я могу увеличить индикатор выполнения после того, как пользователь нажимает продолжить на каждой странице? В пользовательском путешествии около 15 страниц для ознакомления с веб-сайтом, поэтому я просто хочу простой индикатор выполнения внизу, чтобы показать им, как далеко они продвинулись. Код, который я думаю использовать, это:

 <section class="progress-section">
  <mat-progress-bar
      class = "progressbar"
      [color] = "color"
      [mode] = "mode"
      [value] = "value">
  </mat-progress-bar>
</section>

В файле typescript у меня есть:

 color: ThemePalette = 'primary';
mode: ProgressBarMode = 'determinate';
value = 0;

Прямо сейчас появляется индикатор выполнения со значением 0, но я хочу иметь возможность изменять это значение на каждой последующей странице.

Для дополнительной информации, в пользовательском путешествии есть около 15 страниц, и все они закодированы в разных компонентах. Мой мыслительный процесс состоял бы в том, чтобы реализовать этот индикатор выполнения в корневом файле html / ts, а затем каким-то образом изменить значение индикатора выполнения в каждом файле после нажатия кнопки продолжить? Простейшим способом сделать это, вероятно, было бы иметь для каждой страницы заданное значение, и когда страница загружается, индикатор выполнения переходит к этому значению, таким образом, мне не нужно беспокоиться о возвратах и выходах / перезапусках.

Любая помощь будет оценена!

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

1. это действительно зависит от того, что вы кодируете, как и от множества ситуационных факторов. Если ваша страница статична, процесс прост, и каждая страница загружается отдельно. Затем просто используйте жестко закодированное значение на каждом шаге.

2. Я не думаю, что страницы являются статическими, поскольку веб-сайт не перезагружается, когда я нажимаю продолжить. Это то, с чем я борюсь, поскольку моя первая попытка заключалась в том, чтобы просто иметь общедоступное значение, которое я менял на каждой странице, но на самом деле это не обновляет индикатор выполнения.

3. используете ли вы разные компоненты для каждой страницы (это то, что я имел в виду под «статическим» ^^)?