Question

我在angular-5中有以下要求，其中我有导航/锚标记链接和锚标记点击事件我正在调用函数“gotoApp1（）”，该函数以编程方式提交HTML表单以在新标签中打开应用程序/网站使用相同的用户会话（代码中的“keyField”处理会话）。

HTML code：

<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”锚标签/链接时，它只刷新页面
第一次，如果我再次点击或第二次打开新的应用程序在新标签中。
我认为角度需要时间来加载“输入”标签的值或发生错误。

任何机构都面临这种情况以及如何解决这个问题？

注意：所以要求就在这里，当我第一次点击链接“App-1”时，应该打开新标签页。也没有在控制台上找到任何日志。

Answer 1

将锚标记切换为

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

很可能你会在网址的末尾看到尖锐的（＃）。

如果不使用href属性，则使用锚是不合适的。您正在等待锚点的按钮行为。但是有一些黑客的方式。

href="javascript:void(0);"

或(click)="gotoApp1($event)"并在函数

中

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

Answer 2

经过一番努力后，我找到了解决方案，在从锚点标记点击事件中调用的函数提交html表单时打开新标签，

HTML code：

<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属性，在typescript代码中使用了来自angular / core的ElementRef，而不是使用DOM的document.getElementById（）方法，设置表单提交所需的值，因此不需要在HTML上绑定它。

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

2 个答案: