从 angular-5 中的锚标记单击事件调用的函数提交 html 表单时打开新选项卡

Question

我在 angular-5 中有以下要求，其中我有 navigation/anchor 标签 link 并且在锚标签点击事件上我正在调用函数 "gotoApp1()"，该函数以编程方式提交 HTML 表单以在具有相同用户会话的新选项卡中打开 application/website（代码中的 "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>

代码隐藏文件，即 typescript(.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() {
        ...
        ...
        ...
    }
}

问题：

当我点击 "App-1" 锚点 tag/link 时，它只会刷新页面
第一次，如果我再次点击或第二次点击，它会打开新的应用程序在新标签中。
我认为 angular 需要时间来加载 "input" 标签的值或发生错误。

有没有人遇到过这种情况，如何解决？

注意：所以要求在这里，当我第一次单击 link "App-1" 时，新选项卡应该打开。在控制台上也没有找到任何日志。

Answer 1

将您的锚标记切换为

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

很可能您在 url 的末尾看到尖锐的 (#)。

不使用href属性不适合使用anchor。您正在等待来自锚点的按钮行为。但也有 hacky 的方法。

href="javascript:void(0);"

或 (click)="gotoApp1($event)" 和函数内部

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

Answer 2

经过一番努力，我找到了解决方案，可以在提交 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代码：

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 属性并在打字稿代码中使用 angular/core 中的 ElementRef 而不是使用 document.getElementById DOM的()方法，用来设置表单提交时需要的值，所以不需要在HTML.

上绑定

从 angular-5 中的锚标记单击事件调用的函数提交 html 表单时打开新选项卡

open new tab on submitting html form from function called on anchor tag click event in angular-5

angular2-forms

angular

angular5