Làm thế nào để mở một liên kết trong tab mới bằng cách sử dụng góc?

81

Tôi có một thành phần góc 5 cần mở liên kết trong tab mới, tôi đã thử như sau:

<a href="www.example.com" target="_blank">page link</a>

khi tôi mở liên kết, ứng dụng chạy chậm và mở ra một tuyến đường như:

localhost:4200/www.example.com

Câu hỏi của tôi là: Cách chính xác để làm điều này trong góc là gì?

— AlejoDev
nguồn

3

Điều này phù hợp với tôi<a href="https://example.com" target="_blank">page link</a>

— M Mansour

Bạn chỉ có thể sử dụng<a [href]="'www.example.com'" target="_blank">Link</a>

— Huấn luyện viên

115

Sử dụng window.open(). Nó khá đơn giản!

Trong component.htmltệp của bạn-

<a (click)="goToLink("www.example.com")">page link</a>

Trong component.tstệp của bạn-

goToLink(url: string){
    window.open(url, "_blank");
}

— Harunur Rashid
nguồn

Ai đó có thể chỉ ra cách thực hiện điều này trong đó chuỗi trong hàm goToLink không phải là 'chuỗi ma thuật' không? Ví dụ, thông qua một biến?

— Brian Allan West,

@BrianAllanWest Tôi sẽ chỉ đặt một biến trong tệp thành phần tương ứng và để lại tham số trong html. Nếu điều này không hiệu quả, chỉ cần liên kết nó với mẫu bằng thuộc tính ràng buộc mặc định [] và sau đó bạn có thể chạy bất kỳ logic nào bạn muốn trên đó. .html goToLink () .ts goToLink () {window.open (Variable của bạn Ở đây, "_blank")}

— thenolin

Làm cách nào để tôi có thể để nó ở trong một cửa sổ bật lên nhỏ và lắng nghe những thay đổi trong URL của nó.

— Mostafa Al Belliehy

Tôi sẽ thêm một href='', để nó trông vẫn có thể nhấp được

— Leonardo Rick

Có thể sử dụng mà không cần _blank . Theo mặc định, một tab mới sẽ mở ra.

— Yury Matatov

35

chỉ cần sử dụng url đầy đủ dưới dạng href như thế này:

<a href="https://www.example.com/" target="_blank">page link</a>

— zhimin
nguồn

9

Trong app-routing.modules.tstệp:

{
    path: 'hero/:id', component: HeroComponent
}

Trong component.htmltệp:

target="_blank" [routerLink]="['/hero', '/sachin']"

— Femina
nguồn

8

<a [routerLink]="" (click)="openSite(SiteUrl)">{{SiteUrl}}</a>

và trong Component.ts của bạn

openSite(siteUrl) {
   window.open("//" + siteUrl, '_blank');
}

— John Anthony Romualdo
nguồn

7

Tôi vừa khám phá ra một cách thay thế để mở tab mới với Bộ định tuyến.

Trên mẫu của bạn,

<a (click)="openNewTab()" >page link</a>

Và trên component.ts của bạn, bạn có thể sử dụng serializeUrl để chuyển đổi tuyến đường thành một chuỗi, có thể được sử dụng với window.open()

openNewTab() {
  const url = this.router.serializeUrl(
    this.router.createUrlTree(['/example'])
  );

  window.open(url, '_blank');
}

— gojun
nguồn

5

Thử đi:

 window.open(this.url+'/create-account')

Không cần sử dụng '_blank'. window.opentheo mặc định sẽ mở một liên kết trong một tab mới.

— DINESH Adhikari
nguồn

1

Tại sao anh ta nên thử điều đó? Cái đó làm cái gì?

— Andreas

1

đây là câu trả lời của câu hỏi này "Làm thế nào để liên kết mở trong tab mới trong góc 5" window.open bởi liên kết mở mặc định trong tab mới

— Dinesh Adhikari

4

Chỉ cần thêm target="_blank"vào

<a mat-raised-button target="_blank" [routerLink]="['/find-post/post', post.postID]"
    class="theme-btn bg-grey white-text mx-2 mb-2">
    Open in New Window
</a>

— C.Ikongo
nguồn

2

Một số trình duyệt có thể chặn cửa sổ bật lên được tạo bởi window.open(url, "_blank");. Một cách khác là tạo một liên kết và nhấp vào nó.

...

  constructor(@Inject(DOCUMENT) private document: Document) {}
...

  openNewWindow(): void {
    const link = this.document.createElement('a');
    link.target = '_blank';
    link.href = 'http://www.your-url.com';
    link.click();
    link.remove();
  }

— Morlo Mbakop
nguồn