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

Posted 2023-03-13

【中文标题】如何从打字稿访问文档实例

【英文标题】：How to access to document instance from typescript

【发布时间】：2018-12-13 01:35:15

【问题描述】：

问题的本质在下，有一个项目决定在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%;

【参考方案1】：

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