Question

接下来，问题的实质是，有一个项目决定在Angular 6下进行重写，该项目中有一个横向导航面板。该面板的机器人是用JS编写的（此代码可在某些网站上找到）。我不擅长JS，在Angular中我经验不足。告诉我如何重写此代码以与Angular一起使用。

navigation panel

JS

$(document).ready(function() {
  $('.time-button').click(function() {
    if ($(this).hasClass('open')) {
      $(this).removeClass('open').addClass('closed');
      return $('.time-panel').animate({
        'right': '-253'
      }, 260);
    } else {
      $(this).removeClass('closed').addClass('open');
      return $('.time-panel').animate({
        'right': '0'
      }, 260);
    }
  });
});

html

<div class="time-panel">
  <div class="content">
    <h5 class="d-flex justify-content-center"><span class="badge badge-success">Режим просмотра</span></h5>
    <div class="d-flex justify-content-center btn-group btn-group-sm btn-group-toggle" data-toggle="buttons">
      <label class="btn btn-outline-success btn-control active">
                <input type="radio" name="options" id="real-time" autocomplete="off" checked> Реальное</br>время
            </label>
      <label class="btn btn-outline-primary btn-control">
                <input type="radio" name="options" id="archive" autocomplete="off"> Просмотр</br>архива
            </label>
    </div>
    <h5 class="d-flex justify-content-center mt-3"><span class="badge badge-primary">Навигация по архиву</span></h5>
    <div class="d-flex">
      <div class="pr-1">
        <span class="text-uppercase">Пост</span>
        <div class="input-group input-group-sm">
          <select class="custom-select" id="storageBox">
            <option selected>Выбрать</option>
            <option value="1">ЭЦ-1</option>
            <option value="2">ЭЦ-2</option>
            <option value="3">ГП-1</option>
            <option value="4">ГП-2</option>
            <option value="5">ГП-3</option>
          </select>
        </div>
      </div>
      <div class="pl-1">
        <span class="d-flex justify-content-end text-uppercase">Интервал</span>
        <div class="input-group input-group-sm">
          <select class="custom-select" id="intervalBox">
            <option selected>Выбрать</option>
            <option value="1">1 час</option>
            <option value="2">30 минут</option>
            <option value="3">10 минут</option>
            <option value="4">5 минут</option>
            <option value="5">1 минута</option>
          </select>
        </div>
      </div>
    </div>
    <div class="d-flex flex-column  mt-1">
      <span class="d-flex justify-content-center text-uppercase">Дата и время просмотра</span>
      <div class="form-group">
        <div class="input-group date" id="dateTimePicker" data-target-input="nearest">
          <input type="text" class="form-control datetimepicker-input" data-target="#dateTimePicker" />
          <div class="input-group-append" data-target="#dateTimePicker" data-toggle="datetimepicker">
            <div class="input-group-text">
              <i class="fa fa-calendar" title="Выбор даты и времени просмотра"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="d-flex mt-1">
      <button type="button" title="Перемотать назад" class="btn btn-sm btn-outline-primary btn-control" id="prevButton">
                <i class="d-flex align-items-center justify-content-center material-icons">keyboard_arrow_left</i>
            </button>
      <button type="button" title="Применить выбранные параметры" class="btn btn-sm btn-outline-primary ml-1 mr-1" id="queryButton">
                <i class="d-flex align-items-center justify-content-center material-icons">autorenew</i>
            </button>
      <button type="button" title="Перемотать вперед" class="btn btn-sm btn-outline-primary  btn-control" id="nextButton">
                <i class="d-flex align-items-center justify-content-center material-icons">keyboard_arrow_right</i>
            </button>
    </div>
    <span class="d-flex justify-content-center mt-2 text-uppercase">Вид графика</span>
    <div class="d-flex justify-content-center btn-group btn-group-sm btn-group-toggle" data-toggle="buttons">
      <label class="btn btn-outline-primary  btn-control active">
                <input type="radio" name="options" id="option10" autocomplete="off" checked>Классический
            </label>
      <label class="btn btn-outline-primary  btn-control">
                <input type="radio" name="options" id="option11" autocomplete="off">По центру
            </label>
    </div>
  </div>
  <!--Visible button-->
  <div class="time-button" title="Панель навигации по архиву">
    <i class="material-icons">gamepad</i>
  </div>
</div>

css

.time-panel {
  position: fixed;
  top: 177px;
  right: -253px;
  border: 1px solid #0062cc;
  z-index: 100;
}

.time-panel .content {
  width: 250px;
  height: 400px;
  padding: 15px;
  background: #ffffff;
}

.time-panel .time-button {
  position: absolute;
  right: 100%;
  top: -1px;
  background: #0062cc;
  border-bottom-left-radius: 0.25rem;
  border-top-left-radius: 0.25rem;
  cursor: pointer;
}

.time-panel .time-button i {
  color: white;
  padding: 5px;
  font-size: 32px;
}

.btn-control {
  width: 100%;
}

Answer 1

没有人会为您创建现成的解决方案。您需要更准确地回答问题，并提供一些您编写的代码才能实现目标。因此，您实际上是被否决了。简而言之，由于angular是基于组件的框架，因此您需要创建一个组件并将该视图+ CSS绑定到该组件。但是，Angular是一个巨大的框架，设置起来可能很痛苦。如果您打算将整个项目迁移到angular，我建议您使用一些现有的模板。

如何从打字稿访问文档实例

1 个答案: