Angular Проблема маршрутизации после загрузки в Excel - PullRequest
Новая
       33

Angular Проблема маршрутизации после загрузки в Excel

0 голосов
/ 10 февраля 2020

Моя маршрутизация работает, если я не загружаю файл Excel, но если я загружаю файл, а затем использую маршрутизацию, то это не удается.

Строка, которая кажется проблемной c, - это строка: 

 **const Excel = require('exceljs');**

Эта строка внутри функции, которая загружает Excel. Если я нажимаю кнопку «Назад», текущая и предыдущая страницы отображаются на новой странице, и OnInit и конструктор не нажимаются 

<a  (click)="btnClick()" class="btn btn-default cancel-btn">Back</a>

btnClick() {
    this.router.navigateByUrl('/newPage');
};

Я также пытался это сделать, 

<a  [routerLink]="['/newPage']" class="btn btn-default cancel-btn">Back</a>

Но на новой странице я вижу селектор обеих страниц, 

 <oldPage></oldPage>
 <newPage></newPage>

, затем я попробовал это: 

 I have tried ng Zone code too.

  btnClick() {
    if (this.inTheZone){
       this.inTheZone = false;
       this.ngZone.run(() => {
      this.router.navigate(['/newPage']);
    })
  }
};

Мой код маршрутизации такой: 

const routes: Routes = [
{
  path: 'newPage', component: newPageComponent, data: { title: 'NewPage' }
}]

Пожалуйста, помогите.

1 Ответ

1 голос
/ 24 февраля 2020

Вероятно, ваша проблема, как сказал Fmerco, в том, что вы используете require, что даст вам sh в вашем приложении.

В Angular мы используем TypeScript и, следовательно, мы можем использовать ES2015 по крайней мере.

Это означает, что мы используем модульную систему из ES2015, которая использует import в качестве ключевого слова для извлечения информации из модулей.

import { Workbook } from 'exceljs';

И если вы хотите отправить sh файл клиенту, вы не можете использовать перенаправление (потому что таким образом вы нарушаете концепцию SPA и, возможно, маршрутизацию), поэтому вам, вероятно, понадобится библиотека типа file-saver. 

workbook.xlsx.writeBuffer().then((data) => {
      let blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
      fs.saveAs(blob, 'CarData.xlsx');
});

Вы можете найти очень хороший учебник в https://www.ngdevelop.tech/export-to-excel-in-angular-6/ и пример в https://github.com/exceljs/exceljs (обновлены до Angular 8).

...