कोणीय 2 में निष्क्रिय लिंक - <a href=terts> समतुल्य

Question

कोणीय 1.x में मैं एक लिंक बनाने के लिए निम्नलिखित कर सकता हूं जो मूल रूप से कुछ भी नहीं करता है:

<a href="">My Link</a>

लेकिन वही टैग Angular 2 में ऐप बेस पर नेविगेट करता है। Angular 2 में इसके बराबर क्या है?

संपादित करें: यह कोणीय 2 राउटर में एक बग जैसा दिखता है और अब है बारे में गिटहब पर एक खुला मुद्दा है।

मैं एक बॉक्स समाधान या एक पुष्टिकरण की तलाश कर रहा हूं कि कोई भी नहीं होगा।

Comments

आप अब भी कर सकते हैं। यह सिर्फ html है। इसके लिए कोई विशेष उपयोग?

— 21

हां, यह अभी भी वैध HTML है, लेकिन इसका प्रभाव Angular 1.x के समान नहीं है।

— s.alem

क्या आपने <a>"html" के बिना, बस कोशिश की ?

— सासक्सा

Yeah, but than the browser doesn't treat it in the same way. I know I can override i.e. the cursor effect with css, and assign pointer to all a tags. But that looks hacky.

— s.alem

My opinion is that ng1 way was the wrong way (: Default behavior should be as it is in standard html...

— Sasxa

Answer 1

यदि आपके पास 5 या उससे ऊपर का कोणीय है, तो बस बदल दें

<a href="" (click)="passTheSalt()">Click me</a>

में

<a [routerLink]="" (click)="passTheSalt()">Click me</a>

एक लिंक एक आइकन के साथ प्रदर्शित किया जाएगा जब उस पर मँडरा और उसे क्लिक करने से कोई भी मार्ग ट्रिगर नहीं होगा।

नोट: यदि आप क्वेरी पैरामीटर रखना चाहते हैं, तो आपको निम्न पर queryParamsHandlingविकल्प सेट करना चाहिए preserve:

<a [routerLink]=""
   queryParamsHandling="preserve"
   (click)="passTheSalt()">Click me</a>

Comments

इसने [routerLink]=""इसे <a href="null" (click)="myFunction()">My Link</a>क्रोम 64 में कोणीय 5 के रूप में प्रस्तुत किया ।

— Zymotik

मैं उसी की पुष्टि कर सकता हूं [routerLink]=""/ href="null"IE 11 में काम कर रहा हूं

— Zymotik

angular7 में <a hrouterLinkacing="" (click)="passpassTheSalt()"> मुझे क्लिक करें </a> काम करता है। मुझे दिखाई देता है कि <a hclclify="="passTheSalt()"> राऊटर के बिना क्लिक करें </a> के रूप में अच्छी तरह से कोणीय 7 में काम करता है। [राऊटरलिंक] या राउटरलिंक का उपयोग करके निष्क्रिय एंकर लिंक बनाने का बेहतर तरीका क्या है?

— इयान Poston Framer

@IanPostonFramer जब मैं हटाता हूं [routerLink]="", तो पाठ पर क्लिक करें मुझे लिंक के रूप में प्रदर्शित नहीं किया जाता है और हाथ कर्सर आइकन नहीं दिखाता है।

— एमिल कोनिंग

सूचना: यह आपके URL पैरामेट्स को रीसेट कर देगा। सावधान ग्राहक।

— Stavm

Answer 2

यह वही होगा, इसमें कुछ भी संबंधित नहीं है angular2। यह सरल HTML टैग है।

मूल रूप से a(लंगर) टैग HTML पार्सर द्वारा प्रदान किया जाएगा।

संपादित करें

आपको लगता है कि निष्क्रिय कर सकते हैं hrefहोने से javascript:void(0)उस पर तो कुछ भी नहीं है उस पर क्या होगा। (लेकिन इसकी हैक)। मुझे पता है कि कोणीय 1 ने इस कार्यक्षमता को बॉक्स से बाहर कर दिया है जो अब मुझे सही नहीं लगता है।

<a href="javascript:void(0)" >Test</a>

Plunkr

---

अन्य तरीके से उपयोग किया जा सकता है, routerLinkपासिंग ""वैल्यू के साथ निर्देशन जो अंततः खाली उत्पन्न करेगाhref=""

<a routerLink="" (click)="passTheSalt()">Click me</a>

Comments

@ s.alem जो आप कभी कह रहे हैं, कि #लंगर के अंदर होने से मार्ग hrefप्रभावित हो सकता Angular1है..आपको डिफ़ॉल्ट पृष्ठ पर भेज सकते हैं (यदि वहां है)

— पंकज पारकर

मुझे पता है कि #कोणीय 1.x में क्या प्रभाव है । मुझे एक लिंक चाहिए जो href=""कोणीय 2 में कुछ भी नहीं करता है, जैसे कोणीय 1.x में।

— s.alem

@ s.alem ऐसा करेगा..लेकिन <a href="">My Link</a>वर्तमान में इसके साथ क्या हो रहा है?

— पंकज पारकर

[राऊटरलिंक] = "" आपके मार्ग से क्वेरी परम को हटा देगा, यह संभवत: वह नहीं है जो आप चाहते हैं। आप क्वेरी को सुरक्षित रखने के लिए उपयोग कर सकते हैं, लेकिन ऐसा लगता है कि बहुत दूर जा रहा है

— narthur157

हालाँकि, विकल्प 1: href="javascript:void(0);"मेरे लिए काम नहीं करता है।

— पॉल कार्लटन

Answer 3

वहाँ इसे angular2 के साथ करने के तरीके हैं, लेकिन मैं दृढ़ता से असहमत हूं कि यह एक बग है। मैं कोणीय 1 से परिचित नहीं हूं, लेकिन यह वास्तव में गलत व्यवहार की तरह लगता है, जैसा कि आप दावा करते हैं कि कुछ मामलों में उपयोगी है, लेकिन स्पष्ट रूप से यह किसी भी ढांचे का डिफ़ॉल्ट व्यवहार नहीं होना चाहिए।

एक तरफ असहमति आप एक सरल निर्देश लिख सकते हैं जो आपके सभी लिंक को पकड़ लेता hrefहै और सामग्री की जांच कर सकता है और यदि इसकी लंबाई 0 है तो आप इसे निष्पादित करते हैं preventDefault(), यहां एक छोटा सा उदाहरण है।

@Directive({
  selector : '[href]',
  host : {
    '(click)' : 'preventDefault($event)'
  }
})
class MyInhertLink {
  @Input() href;
  preventDefault(event) {
    if(this.href.length == 0) event.preventDefault();
  }
}

आप PLATFORM_DIRECTIVES में इस निर्देश को जोड़कर अपने आवेदन पर काम कर सकते हैं

bootstrap(App, [provide(PLATFORM_DIRECTIVES, {useValue: MyInhertLink, multi: true})]);

यहाँ एक है plnkr एक उदाहरण काम कर रहे हैं।

Comments

एक वैश्विक, कोणीय समाधान के लिए अपवोट करें, लेकिन मैं इसे सही उत्तर के रूप में स्वीकार नहीं कर रहा हूं क्योंकि जैसा कि मैंने कहा, मैं केवल एक आउट बॉक्स समाधान की तलाश कर रहा हूं, जब तक कि वे पुष्टि नहीं करते कि कोई भी या जब तक मुझे वास्तव में ज़रूरत नहीं होगी यह। लेकिन फिर भी बहुत-बहुत धन्यवाद।

— s.alem

के साथ समस्या pointer-eventsIE ( caniuse ) के साथ समर्थन की कमी है (मैं इसे IE11 के साथ भी अजीब तरह से बायपास कर सकता हूं), और यह कंसोल से लिंक पर क्लिक करने से नहीं रोकता है । मैंने @ पंकज उत्तर को अपवित्र कर दिया है क्योंकि यह मेरे दृष्टिकोण से सबसे आसान है, मेरा उत्तर केवल इसे कोणीय 2 के साथ करने का एक तरीका है, मैं इसे आसान बना सकता हूं लेकिन सीएसएस चयनकर्ता सीमित हैं।

— एरिक मार्टिनेज

यह बूटस्ट्रैप टैब लिंक (जैसे <a href="#tab-id">) को तोड़ने के लिए प्रतीत होता है

— xd6_

कौन सा मॉड्यूल बूटस्ट्रैप फंक्शन है?

— Jun711

Answer 4

एक एंकर को किसी चीज़ पर नेविगेट करना चाहिए, इसलिए मुझे लगता है कि जब यह मार्ग सही हो तो व्यवहार सही है। यदि आपको पृष्ठ पर कुछ टॉगल करने की आवश्यकता है, तो यह एक बटन की तरह अधिक है? मैं बूटस्ट्रैप का उपयोग करता हूं इसलिए मैं इसका उपयोग कर सकता हूं:

<button type="button" class="btn btn-link" (click)="doSomething()">My Link</button>

Comments

मुझे यह समाधान पसंद है। यदि आप हाथ दिखाने के लिए कर्सर रखना चाहते हैं, तो शैली जोड़ें = "कर्सर: पॉइंटर"।

— न्यूमैन

कई स्थितियों में एक अच्छा समाधान, हालांकि इस बात से अवगत रहें कि बटन में पाठ आधारित एंकर की तुलना में बड़े आयाम हैं।

— yankee

@yankee आप इसे css में बदल सकते हैं, लेकिन मैं अनुशंसा नहीं करता ... तथ्य यह है, एक बटन एक बटन है, और एक लिंक एक लिंक है ... बहुत दुख की बात है कि वेब सफेद या काला नहीं है।

— अय्याश

Answer 5

मैं सीएसएस के साथ इस वर्कअराउंड का उपयोग कर रहा हूं:

/*** Angular 2 link without href ***/
a:not([href]){
    cursor: pointer; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    user-select: none
}

एचटीएमएल

<a [routerLink]="/">My link</a>

उम्मीद है की यह मदद करेगा

Comments

यह एक बेहतर समाधान है क्योंकि यह मुख्य रूप से एक दृश्य प्रभाव है जो गायब है। आप इस सीएसएस को कोणीय परियोजना के शीर्ष-स्तरीय styles.cssफ़ाइल में रख सकते हैं और यह बहुत अच्छा काम करेगा!

Answer 6

सिमीला घोल :

<a href="#" (click)="foo(); false">
<a href="" (click)="false">

Comments

यह सबसे सरल और सबसे सुरुचिपूर्ण समाधान प्रतीत होता है।

— बैंगनी पिरान्हा

सरल उत्तर

— SU

Answer 7

वास्तव में एक सरल समाधान ए टैग का उपयोग नहीं करना है - इसके बजाय एक स्पैन का उपयोग करें:

<span class='link' (click)="doSomething()">Click here</span>

span.link {
  color: blue;
  cursor: pointer;
  text-decoration: underline;
}

Comments

आपको सिमेंटिक मार्कअप के अर्थ में ऐसा नहीं करना चाहिए। buttonयदि आप doSomethingपृष्ठ पर चाहते हैं, तो एक तत्व का उपयोग करें ।

— माइकल कुहेल

<button>जब spaceकुंजी दबाया जाता है तो तत्व डिफ़ॉल्ट रूप से क्लिक करते हैं । उपयोग करना span(या <a>) इस सुविधा को हटा देता है - इसलिए कीबोर्ड की क्रियाएं अपेक्षित रूप से काम नहीं करेंगी

— Drenai

Answer 8

यहाँ एक सरल तरीका है

  <div (click)="$event.preventDefault()">
            <a href="#"></a>
   </div>

बुदबुदाई घटना पर कब्जा और इसे नीचे गोली मार

Comments

डिफ़ॉल्ट व्यवहार को रोकने के लिए स्वयं लंगर का उपयोग क्यों न करें? जैसे यहाँ बताया गया है: stackoverflow.com/a/44465069/702783 कम लगता है »hacky« मेरे लिए।

— माइकल कुहनेल 11

Answer 9

इसे करने के कुछ तरीके इस प्रकार हैं:

• <a href="" (click)="false">Click Me</a>

• <a style="cursor: pointer;">Click Me</a>

• <a href="javascript:void(0)">Click Me</a>

Answer 10

मेरे मामले में href विशेषता को हटाने से समस्या का समाधान होता है जब तक कि एक क्लिक फंक्शन असाइन करना है।

Answer 11

आपने डिफ़ॉल्ट ब्राउज़र व्यवहार को रोक दिया है। लेकिन आपको इसे पूरा करने के लिए एक निर्देश बनाने की आवश्यकता नहीं है।

यह निम्न उदाहरण के रूप में आसान है:

my.component.html

<a href="" (click)="goToPage(pageIndex, $event)">Link</a>

my.component.ts

goToPage(pageIndex, event) {
  event.preventDefault();
  console.log(pageIndex);
}

Answer 12

कोणीय 5 के लिए अद्यतन किया गया

import { Directive, HostListener, Input } from '@angular/core';

@Directive({
  // tslint:disable-next-line:directive-selector
  selector : '[href]'
})
export class HrefDirective {
  @Input() public href: string | undefined;

  @HostListener('click', ['$event']) public onClick(event: Event): void {
    if (!this.href || this.href === '#' || (this.href && this.href.length === 0)) {
      event.preventDefault();
    }
  }
}

Answer 13

मेरे पास डमी एंकर टैग के लिए 4 समाधान हैं।

    1. <a style="cursor: pointer;"></a>
    2. <a href="javascript:void(0)" ></a>
    3. <a href="current_screen_path"></a>

4. यदि आप बूटस्ट्रैप का उपयोग कर रहे हैं:

<button class="btn btn-link p-0" type="button" style="cursor: pointer"(click)="doSomething()">MY Link</button>

Answer 14

मुझे आश्चर्य है कि क्यों कोई भी रूटर का सुझाव नहीं दे रहा है और राउटरलिंक को निष्क्रिय करें (कोणीय 7)

<a [routerLink]="[ '/resources' ]" routerLinkActive="currentUrl!='/resources'">

मैंने href हटा दिया और अब इसका उपयोग कर रहा हूं। Href का उपयोग करते समय, यह बेस url पर जा रहा था या फिर से उसी मार्ग को पुनः लोड कर रहा था।

Answer 15

आपको निम्न के रूप में ईवेंट के डिफ़ॉल्ट व्यवहार को रोकने की आवश्यकता है।

Html में

<a href="" (click)="view($event)">view</a>

Ts फ़ाइल में

view(event:Event){
 event.preventDefault();
 //remaining code goes here..
}

Answer 16

Angular2 RC4 के लिए अद्यतन:

import {HostListener, Directive, Input} from '@angular/core';

@Directive({
    selector: '[href]'
})
export class PreventDefaultLinkDirective {

    @Input() href;
    @HostListener('click', ['$event']) onClick(event) {this.preventDefault(event);}

    private preventDefault(event) {
        if (this.href.length === 0 || this.href === '#') {
            event.preventDefault();
        }
    }
}

का उपयोग करते हुए

bootstrap(App, [provide(PLATFORM_DIRECTIVES, {useValue: PreventDefaultLinkDirective, multi: true})]);

Answer 17

वास्तव में सरल उपाय है (click)="(null)"

<a class="btn btn-default" (click)="(null)">Default</a>

Comments

शायद कोई टिप्पणी क्यों ऐसी तकनीक खराब है?

— ग्रिग्सन

जब आप एक क्लिक बुरा नहीं चाहते हैं तो कोड में हर जगह क्लिक लिखना

— Jens Alenius

लेकिन यह वही है जो मैं करना चाहता हूं: कोड में "कुछ भी नहीं क्लिक करें" के रूप में स्थान चिह्नित करें, लेकिन नए सिंटैक्स का समर्थन करें। ऑन्कलिक = "जावास्क्रिप्ट: शून्य" जैसे निर्माण वास्तव में बदसूरत हैं। और href = "#" अविश्वसनीय हैं, क्योंकि वे आपके व्यूपोर्ट को शीर्ष तक पहुंचा सकते हैं। इसलिए मैं बेहतर विकल्प नहीं देख सकता

— grigson

मुझे आपका हल पसंद है। धन्यवाद।

— माई हू लूợी

मेरे नए उत्तर की जाँच करें। अगर आप नहीं चाहते कि

— अचोर