在新标签页中打开页面

Question

When clicking 'Open in new tab', the current page should open in a new tab.

What I have tried: To open the current page in a new tab, I have added 'routerLink: this.selectedOption.routerLink' within app-sidebar.component.ts

thirdOptions = [
    {
      name: 'Open in new tab',
      icon: 'data-management',
      routerLink: this.selectedOption.routerLink
    }
  ];

app-sidebar.component.ts

import { AuthService } from 'projects/login/src/app/shared-services/auth.service';
import { Component, Inject } from '@angular/core';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-sidebar-root',
  templateUrl: './app-sidebar.component.html',
  styleUrls: ['./app-sidebar.component.scss']
})
export class AppSidebarComponent {
  userInfo$: Observable<any>;

  selectedOption = {
    name: 'Dashboard',
    icon: 'dashboard',
    routerLink: '/dashboard'
  };

  mainOptions = [
    { name: 'Search', icon: 'search', routerLink: '/search' },
    { name: 'Dashboard', icon: 'dashboard', routerLink: '/dashboard' },
    { name: 'Budgeting', icon: 'budgeting', routerLink: '/budgeting' },
    { name: 'Invoicing', icon: 'invoicing', routerLink: '/invoicing' },
    { name: 'Reports', icon: 'reports', routerLink: '/reports' }
  ];

  thirdOptions = [
    {
      name: 'Open in new tab',
      icon: 'data-management',
      routerLink: this.selectedOption.routerLink
    }
  ];

  public collapsed = false;

  constructor(@Inject(AuthService) private authSevice: AuthService) {
    if (window.localStorage.getItem('sidebar-is-collpased')) {
      this.collapsed = JSON.parse(
        window.localStorage.getItem('sidebar-is-collpased')
      );
    }
    this.userInfo$ = this.authSevice.userInfo$;
  }

  public selectOption(option) {
    this.selectedOption = option;
    console.log(this.selectedOption.routerLink);
  }

  public collapsSidebar() {
   ...
  }
}

app-sidebar.component.html

<div class="af-sidebar" [class.collapsed]="collapsed">
  <div class="af-sidebar--header" (click)="collapsSidebar()">
    <div class="af-sidebar--header--toggle-btn"></div>
  </div>
  <div class="af-sidebar--user">
    <div class="af-sidebar--user--info">

    </div>
  </div>
  <div class="af-sidebar--main-options">
    <ng-container *ngFor="let option of mainOptions">
      <sidebar-option
        [option]="option"
        routerLink="{{ option.routerLink }}"
        (click)="selectOption(option)"
        [selected]="option.name == selectedOption.name"
        [collapsed]="collapsed"
      ></sidebar-option>
    </ng-container>
  </div>
  <div class="af-sidebar--third-options">
    <ng-container *ngFor="let option of thirdOptions">
      <sidebar-option
        [option]="option"
        routerLink="{{ option.routerLink }}"
        (click)="selectOption(option)"
        [selected]="option.name == selectedOption.name"
        [collapsed]="collapsed"
      ></sidebar-option>
    </ng-container>
  </div>
</div>

When I click on 'Open in new tab' it defaults to /dashboard (this is the default selectedOption and does not open in a new tab.

The correct behavior should be: when I click on 'Open in new tab', the current page should open in a new tab. For example, if i am currently on the 'Reports' page and I click 'Open in new tab' then the Reports page should open in a new tab

Answer 1

Here is working Example

 this.externalWindow = window.open('', '', 'width=600,height=400,left=200,top=200');

or use this

 openGoogle() {
    var google = window.open('http://www.google.com', "_blank"); 
    var timer = setInterval(function() { 
    if(wingoogleclosed) {
        clearInterval(timer);
        alert('closed !!!');
    }
    }, 2000);
  }

Answer 2

您可以使用HTML标签来实现

<a href="" target="_blank"> Open in new tab </a>