कोणीय का उपयोग करके नए टैब में एक लिंक कैसे खोलें?

84

मेरे पास एक कोणीय 5 घटक है जिसे नए टैब में एक लिंक खोलने की आवश्यकता है, मैंने निम्नलिखित की कोशिश की:

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

जब मैं लिंक खोलता हूं, तो एप्लिकेशन धीमा हो जाता है और जैसे कोई मार्ग खोलता है:

localhost:4200/www.example.com

मेरा सवाल है: कोणीय में ऐसा करने का सही तरीका क्या है?

— AlejoDev
स्रोत

3

यह मेरे लिए काम करता है<a href="https://example.com" target="_blank">page link</a>

— एम मंसूर

आप बस इस्तेमाल कर सकते हैं<a [href]="'www.example.com'" target="_blank">Link</a>

— कोच

122

का उपयोग करें window.open()। यह बहुत सीधा है!

आपकी component.htmlफ़ाइल में-

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

आपकी component.tsफ़ाइल में-

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

— हरुनूर रशीद
स्रोत

क्या कोई ऐसा करने का एक तरीका बता सकता है जहाँ goToLink फ़ंक्शन के भीतर स्ट्रिंग 'मैजिक स्ट्रिंग' नहीं है? उदाहरण के लिए, एक चर के माध्यम से?

— ब्रायन एलन वेस्ट

@BrianAllanWest मैं बस इसी घटक फ़ाइल में एक चर सेट करेगा और HTML में पैरामीटर को छोड़ देगा। यदि यह काम नहीं करता है, तो बस इसे डिफ़ॉल्ट बाइंडिंग प्रॉपर्टी [] का उपयोग करके टेम्पलेट से बाँध लें और फिर आप उस पर जो भी लॉजिक चाहें, चला सकते हैं। । html goToLink () .ts goToLink () {window.open (आपका वैरिएबल यहां, "

— _ब्लैंक

मैं इसे एक छोटी पॉपअप विंडो में कैसे जाने दे सकता हूं, और इसके URL में परिवर्तन सुन सकता हूं।

— मुस्तफा अल बेलिएहि

मैं एक href=''जोड़ूंगा, तो यह अभी भी क्लिक करने योग्य लगता है

— लियोनार्डो रिक

बिना _blank के उपयोग कर सकते हैं । डिफ़ॉल्ट रूप से, एक नया टैब खुलता है।

— यूरी मततोव

36

बस इस तरह के रूप में पूर्ण यूआरएल का उपयोग करें:

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

— Zhimin
स्रोत

11

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

और आपके Component.ts में

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

— जॉन एंथोनी रोमुआल्डो
स्रोत

मेरे लिए यह केवल "//" के बिना काम करता है

— निकोलस

1

का उपयोग कर "//" + SITEURL तो https: // या http: // SITEURL में प्रतिबद्ध होना चाहिए, हो सकता है उसके लिए आपको @Nicolas समस्या पैदा कर रहा था

— बोस्जन Pišler

10

में app-routing.modules.tsफ़ाइल:

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

में component.htmlफ़ाइल:

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

— फेमिना
स्रोत

8

मैंने अभी राउटर के साथ एक नया टैब खोलने का एक वैकल्पिक तरीका खोजा है।

अपने टेम्पलेट पर,

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

और अपने कंपोनेंट पर। रूट को स्ट्रिंग में बदलने के लिए आप serializeUrl का उपयोग कर सकते हैं, जिसका उपयोग किया जा सकता है window.open()

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

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

— wentjun
स्रोत

5

इसे इस्तेमाल करे:

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

उपयोग करने की आवश्यकता नहीं है '_blank'। window.openडिफ़ॉल्ट रूप से एक नया टैब में एक लिंक खोलता है।

— दिनेश अधकारी
स्रोत

1

वह कोशिश क्यों करे? वह क्या करता है?

— एंड्रियास

1

यह इस सवाल का जवाब है कि "कोणीय 5 में नए टैब में लिंक कैसे खोलें" विंडो। नए टैब में डिफ़ॉल्ट रूप से खुले लिंक द्वारा

— DINESH Adhikari

5

बस जोड़ने target="_blank"के लिए

<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
स्रोत

2

कुछ ब्राउज़र द्वारा बनाए गए पॉपअप को ब्लॉक कर सकते हैं window.open(url, "_blank");। एक विकल्प एक लिंक बनाना और उस पर क्लिक करना है।

...

  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();
  }

— मोरलो मेबाकोप
स्रोत

0

आप बाइंडिंग प्रॉपर्टी व्हाइट रूट की कोशिश कर सकते हैं

आपके घटक में user:any = 'linkABC';

अपने घटक में। html <a target="_blank" href="yourtab/{{user}}">new tab </a>

— jdcreativemaker
स्रोत