如何导出角度项目以进行离线工作

Question

我在我的实践中为我的亲戚建立了一个简单的表格用作数据输入，我需要导出该文件以便它完全脱机工作

表格只是获取数据并打印出来，所以我不需要发送数据或将其保存在任何地方。 最好的方法是什么？

这是ts文件

import { Component, OnInit } from '@angular/core';
import { CommService } from '../services/comm.service';



@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {


  user = {
    Doctor: '',
    Patient: '',
    Type: '',
    Report: '',
    presentation : '',
    single : '',
    FH : '',
    FM : '',
    BPD : '',
    FL : '',
    placenta : '',
    liq : '',
  };


  constructor(private CommService: CommService) { }


  ngOnInit() {
    this.CommService.setData(this.user);

  }

}

如果需要的话，看一下这段相当长的代码

<div class=" uk-animation-slide-left-small uk-grid">

  <div class="uk-width-1-3 uk-height-large uk-card uk-card-default uk-card-small uk-card-body uk-position-top-center">
    <form>
      <fieldset class="uk-fieldset ">
        <div class="uk-margin">
          <input class="uk-input uk-form-width-1-1 uk-form-small" type="text" placeholder="Dear Doctor" name='user.Doctor' [(ngModel)]="user.Doctor">
        </div>

        <div class="uk-margin" dir="rtl">
          <input class="uk-input uk-form-width-1-1 uk-form-small" type="text" placeholder="اسم المريض" name='user.Patient' [(ngModel)]="user.Patient">
        </div>

        <div class="uk-margin ">
          <p style="float: left;">Ultrasound of : </p>
          <select class=" uk-select uk-width-1-3@s uk-form-small " name='user.Type' [(ngModel)]="user.Type">
            <option>Fetus</option>
            <option>Pelvis</option>
            <option>Abdomen</option>
            <option>Breast</option>
          </select>
        </div>


        <!-- <div class="uk-margin ">
            <textarea class="uk-textarea uk-height-medium" rows="5" placeholder="Report" name='user.Report' [(ngModel)]="user.Report"></textarea>
          </div> -->

      </fieldset>
    </form>




    <ng-container *ngIf="user.Type === 'Abdomen'">

      <form class="uk-animation-fade ">

        <div class="uk-margin">
          <input class="uk-input uk-form-width-medium uk-form-large" type="text" placeholder="abdo">
        </div>

        <div class="uk-margin">
          <input class="uk-input uk-form-width-medium" type="text" placeholder="Default">
        </div>

        <div class="uk-margin">
          <input class="uk-input uk-form-width-medium uk-form-small" type="text" placeholder="Small">
        </div>

      </form>
    </ng-container>

    <ng-container *ngIf="user.Type === 'Pelvis'">

      <form class="uk-animation-fade ">

        <div class="uk-margin">
          <input class="uk-input uk-form-width-medium uk-form-large" type="text" placeholder="pelvis">
        </div>

        <div class="uk-margin">
          <input class="uk-input uk-form-width-medium" type="text" placeholder="Default">
        </div>

        <div class="uk-margin">
          <input class="uk-input uk-form-width-medium uk-form-small" type="text" placeholder="Small">
        </div>

      </form>
    </ng-container>

    <ng-container *ngIf="user.Type === 'Breast'">

      <form class="uk-animation-fade ">

        <div class="uk-margin">
          <input class="uk-input uk-form-width-medium uk-form-large" type="text" placeholder="breast">
        </div>

        <div class="uk-margin">
          <input class="uk-input uk-form-width-medium" type="text" placeholder="Default">
        </div>

        <div class="uk-margin">
          <input class="uk-input uk-form-width-medium uk-form-small" type="text" placeholder="Small">
        </div>

      </form>
    </ng-container>

    <ng-container *ngIf="user.Type === 'Fetus'">

      <form class="uk-form-horizontal uk-margin-small uk-animation-fade">



        <div class="uk-margin-large-right">

          <div class="uk-flex-inline ">
            <span class="uk-form-label uk-margin-small-right uk-text-bold "> Presentation </span>
            <label class="uk-margin-medium-right">
              <input class="uk-radio " type="radio" name="radio1" value="Cephalic" [(ngModel)]="user.presentation"> Cephalic </label>
            <label class="uk-margin-medium-right">
              <input class="uk-radio" type="radio" name="radio1" value="Breech" [(ngModel)]="user.presentation"> Breech </label>
            <label class="uk-margin-medium-right">
              <input class="uk-radio" type="radio" name="radio1" value="Transverse lie" [(ngModel)]="user.presentation"> Transverse lie </label>
          </div>
        </div>

        <hr>
        <div class="uk-margin-large-right">

          <div class="uk-flex-inline ">
            <span class="uk-form-label uk-margin-medium-right uk-text-bold "> Single </span>
            <label class="uk-margin-medium-right">
              <input class="uk-radio " type="radio" name="radio2" value="Viable" [(ngModel)]="user.single"> Viable </label>
            <label class="uk-margin-medium-right">
              <input class="uk-radio" type="radio" name="radio2" value="non-viable" [(ngModel)]="user.single"> non-viable </label>

          </div>
        </div>

        <hr>
        <div class="uk-margin-large-right">

          <div class="uk-flex-inline ">
            <span class="uk-form-label uk-margin-medium-right uk-text-bold "> F.H </span>
            <label class="uk-margin-medium-right">
              <input class="uk-radio " type="radio" name="radio3" value="+Ve" [(ngModel)]="user.FH"> +Ve </label>
            <label class="uk-margin-medium-right">
              <input class="uk-radio" type="radio" name="radio3" value="-Ve" [(ngModel)]="user.FH"> -Ve </label>

          </div>
        </div>
        <hr>

        <div class="uk-margin-large-right">

          <div class="uk-flex-inline ">
            <span class="uk-form-label uk-margin-medium-right uk-text-bold "> F.M </span>
            <label class="uk-margin-medium-right">
              <input class="uk-radio " type="radio" name="radio4" value="+Ve" [(ngModel)]="user.FM"> +ve </label>
            <label class="uk-margin-medium-right">
              <input class="uk-radio" type="radio" name="radio4" value="-Ve" [(ngModel)]="user.FM"> -ve </label>

          </div>
        </div>

        <hr>
        <div class="uk-margin-large-right">

          <div class="uk-margin">
            <label class="uk-form-label uk-text-bold " for="form-horizontal-text">BPD</label>
            <div class="uk-form-controls">
              <input class="uk-input uk-form-width-small" id="form-horizontal-text" type="text" name="user.BPD" [(ngModel)]="user.BPD">
            </div>
          </div>
        </div>
        <hr>
        <div class="uk-margin-large-right">

          <div class="uk-margin">
            <label class="uk-form-label uk-text-bold " for="form-horizontal-text">F.L</label>
            <div class="uk-form-controls">
              <input class="uk-input uk-form-width-small" id="form-horizontal-text" type="text" name="user.FL" [(ngModel)]="user.FL">
            </div>
          </div>
        </div>
        <hr>
        <div class="uk-margin-large-right">

          <div class="uk-flex-inline ">
            <span class="uk-form-label uk-margin-medium-right uk-text-bold "> Placenta </span>
            <label class="uk-margin-medium-right">
              <input class="uk-radio " type="radio" name="radio5" value="Posterior" [(ngModel)]="user.placenta"> Posterior </label>
            <label class="uk-margin-medium-right">
              <input class="uk-radio" type="radio" name="radio5" value="Anterior" [(ngModel)]="user.placenta"> Anterior </label>

          </div>
        </div>
        <hr>
        <div class="uk-margin-large-right">

          <div class="uk-flex-inline ">
            <span class="uk-form-label uk-margin-medium-right uk-text-bold "> Liqoure </span>
            <label class="uk-margin-medium-right">
              <input class="uk-radio " type="radio" name="radio6" value="adaquate" [(ngModel)]="user.liq"> Adaquate </label>
            <label class="uk-margin-medium-right">
              <input class="uk-radio" type="radio" name="radio6" value="not adaquate" [(ngModel)]="user.liq"> not adaquate </label>

          </div>
        </div>

      </form>



<!-- modal window here -->
      <a class="uk-button uk-button-primary" href="#modal-overflow" uk-toggle>Review</a>

<div id="modal-overflow" uk-modal>
    <div class="uk-modal-dialog">

        <button class="uk-modal-close-default" type="button" uk-close></button>

        <div class="uk-modal-header">
            <h2 class="uk-modal-title">Review of {{user.Type}} report</h2>
        </div>

        <div class="uk-modal-body" uk-overflow-auto>

            <ul class="uk-list uk-list-striped">

                <li>
                    <b>Doctor:</b> {{user.Doctor}}</li>
                <li>
                    <b>Patient:</b> {{user.Patient}}</li>
                <li>
                  <b>Presentation:</b> {{user.presentation}}</li>
                <li>
                  <b>Single:</b> {{user.single}}</li>
                <li>
                  <b>FH: </b> {{user.FH}}</li>
                <li>
                  <b>FM: </b> {{user.FM}}</li>
                <li>
                  <b>BPD:</b> {{user.BPD}}</li>
                <li>
                  <b>FL: </b> {{user.FL}}</li>
                <li>
                  <b>Placenta:</b> {{user.placenta}}</li>
                <li>
                  <b>Liqoure: </b> {{user.liq}}</li>

              </ul>

        </div>

        <div class="uk-modal-footer uk-text-right">
            <button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
            <button class="uk-button uk-button-primary uk-modal-close" type="button" [routerLink]="['/preview']">Save</button>
        </div>

    </div>
</div>


    </ng-container>






  </div>

</div>

Answer 1

鉴于我只知道所提供的代码，但在一个基本项目上对我来说确实有效，所以这可能行不通。确保项目的所有依赖项都已在本地计算机上安装（CDN可能无法工作）。

在您的项目目录中：

ng build --prod --base-href ./

这将在您的项目目录中创建一个dist文件夹。将dist（或dist / projectname）的内容复制到脱机计算机，打开index.html。

希望这会有所帮助！