открыть новую вкладку при отправке html-формы из функции, вызываемой по событию click тега привязки в angular-5

Question

У меня есть требование ниже в angular-5, где у меня есть ссылка на тег навигации / привязки, а в событии щелчка тега привязки я вызываю функцию "gotoApp1 ()", которая выполняет программную отправку HTML-формы для открытия приложения / веб-сайта в новой вкладке.с тем же пользовательским сеансом ("keyField" в коде обрабатывается здесь сеансом).

HTML код:

<div>
...
...
...
...

<div>
  <form id="app1" method="post" stype.display="none" target="_blank">
    <input id="key" name="key" type="hidden" [(ngModel)]="keyField">
    <input id="timeOut" name='timeOut' type="hidden" [(ngModel)]="timeOutField">
  </form>
</div>

<div>
    <nav>
      <a class="item selected" href="#"><img class="icon" src="images/work.svg"><span>Container</span></a>
      <a class="nav-item" href="#" (click)="gotoApp1()"><img class="icon" src="images/app1.svg"><span>App-1</span></a>
      <a class="nav-item" href="#" (click)="gotoApp2()"><img class="icon" src="images/app2.svg"><span>App-2</span></a>
    </nav>
</div>
</div>

Код за файлом, т.е. файл машинописи (.ts):

export class MajorComponent implements OnInit {

private keyField:string;
private timeoutInterval = 2000; // seconds

ngOnInit() {
    // here making another service call to load some app data, this service calls is not related to our problem/requirement 
}


gotoApp1() {
        this._service.getApp1Key().subscribe(key => {
          const myform = document.getElementById('app1') as HTMLFormElement;
          myform.action = key.app1Link;
          this.keyField = key.accessKey;
          this.timeOutField = this.timeoutInterval.toString(); // time out in seconds
          myform.submit();
        });
    }



gotoApp2() {
        ...
        ...
        ...
    }
}

Проблемы:

1. Когда я нажимаю на тег / ссылку привязки "App-1", он просто обновляет страницу
   в первый раз, и если я нажимаю снова иливо второй раз он открывает новое приложение в новой вкладке.
2. Я думаю, что angular требует времени для загрузки значения тега "input" или что-то не так.

Любое тело сталкивалось с этимСитуация и как это исправить?

Примечание: Итак, требование здесь, новая вкладка должна быть открыта, когда я впервые нажимаю на ссылку «Приложение-1».Также не найдено журналов на консоли.

Answer 1

После некоторых усилий я нашел решение открыть новую вкладку при отправке html-формы из функции, которая вызывается при событии щелчка тега привязки,

HTML-код:

<div>
    ...
    ...
    ...
    ...

    <div>
      <form #app1 id="app1" method="post" stype.display="none" target="_blank" [action]="appLink">
        <input #key id="key" name="key" type="hidden">
        <input #timeOut id="timeOut" name='timeOut' type="hidden">
      </form>
    </div>

    <div>
        <nav>
          <a class="item selected" href="#"><img class="icon" src="images/work.svg"><span>Container</span></a>
          <a class="nav-item" style="cursor: pointer" (click)="gotoApp1()"><img class="icon" src="images/app1.svg"><span>App-1</span></a>
          <a class="nav-item" style="cursor: pointer" (click)="gotoApp2()"><img class="icon" src="images/app2.svg"><span>App-2</span></a>
        </nav>
    </div>
</div>

.ts code:

export class MajorComponent implements OnInit {

private appLink:string;
private timeoutInterval = 2000; // seconds
@ViewChild('app1') app1: ElementRef;
@ViewChild('key') key: ElementRef;
@ViewChild('timeOut') timeOut: ElementRef;

ngOnInit() {
    // here making another service call to load some app data, this service calls is not related to our problem/requirement 
}


gotoApp1() {

        this._service.getApp1Key().subscribe(key => {
          const myform = this.app1.nativeElement;
          const keyField = this.key.nativeElement;
          keyField.value = key.accessKey;
          const timeOutField = this.timeOut.nativeElement;
          timeOutField.value = this.timeoutInterval.toString(); // time out in seconds
          myform.submit();
        });
    }



gotoApp2() {
        ...
        ...
        ...
    }
}

Я думаю, что проблема в атрибуте href, здесь я открываю новую вкладку при отправке формы через функцию, поэтому удалил атрибут href и в коде машинописного текста используйте ElementRef из angular / core вместо использования document.getElementById() метод DOM, чтобы установить значения, которые требуются при отправке формы, поэтому не требуется связывать ее с HTML.

Answer 2

Переключите свой якорный тег на

<button class="nav-item" type="button" (click)="gotoApp1()"><img class="icon" src="images/app1.svg"><span>App-1</span></button> 

Скорее всего, вы видите диез (#) в конце вашего URL.

Неправильно использовать якорь, если вы не используетеатрибут href.Вы ожидаете поведение кнопки от якоря.Но есть хакерские способы.

href="javascript:void(0);"

или (click)="gotoApp1($event)" и внутри функции

    gotoApp1(event) {
      event.preventdefault();
      ... 
    }