কৌণিক 2 এ প্যাসিভ লিঙ্ক - <a href= পুলিশিং> সমতুল্য

Question

কৌণিক 1.x এ আমি লিঙ্ক তৈরি করতে নিম্নলিখিতগুলি করতে পারি যা মূলত কিছুই করে না:

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

কিন্তু একই ট্যাগটি কৌনিক 2 এ অ্যাপ বেসে নেভিগেট করে অ্যাংুলার 2 এর সমতুল্য কত?

সম্পাদনা: এটি কৌণিক 2 রাউটারে বাগের মতো দেখাচ্ছে এবং এটি সম্পর্কে এখন গিথুবে একটি মুক্ত সমস্যা রয়েছে ।

আমি বাক্সের বাইরে সমাধান বা একটি নিশ্চিতকরণের সন্ধান করছি যে কোনওরকম হবে না।

Comments

আপনি এখনও পারেন। এটি ঠিক এইচটিএমএল। এর জন্য কোন বিশেষ ব্যবহার?

— সাস্সা

হ্যাঁ, এটি এখনও বৈধ এইচটিএমএল, তবে প্রভাবটি কৌণিক 1.x এর মতো নয়।

— s.alem

আপনি কি <a>"এইচটিএমএল" ছাড়াই চেষ্টা করেছেন ?

— সাস্সা

হ্যাঁ, তবে ব্রাউজারের চেয়ে এটি একইভাবে আচরণ করে না। আমি জানি আমি সিএসএসের সাহায্যে কার্সার প্রভাবটি ওভাররাইড করতে পারি এবং সমস্ত ট্যাগকে পয়েন্টার নির্ধারণ করতে পারি a। তবে দেখতে হ্যাকি লাগছে।

— s.alem

আমার মতে এনজি 1 উপায়টি ভুল উপায় ছিল (: মানক এইচটিএমএল-তে যেমন ডিফল্ট আচরণ করা উচিত ...

— সাসেক্সা

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"আইই 11 তে কাজ করছে তা নিশ্চিত করতে পারি

— জিমোটিক

<a [routerLink "=" "(ক্লিক)="passTheSalt()"> আমাকে ক্লিক করুন </a> কৌণিক 7 এ কাজ করে। আমি <a (ক্লিক)="passTheSalt()"> রাউটার ছাড়াই আমাকে ক্লিক করুন </a> দেখুন লিনিকটি কৌনিক 7 এও কাজ করে। [রাউটারলিঙ্ক] বা কোনও রাউটারলিঙ্ক ব্যবহার করে প্যাসিভ অ্যাঙ্কর লিঙ্ক তৈরি করার আরও ভাল উপায় কী?

— ইয়ান পোস্টন ফ্রেমার

@ আইয়ানপোস্টনফ্রেমার আমি যখন সরান [routerLink]="", পাঠ্য আমাকে ক্লিক করুন কোনও লিঙ্ক হিসাবে প্রদর্শিত হয় না এবং হ্যান্ড কার্সার আইকনটি দেখায় না।

— এমিয়েল কোনিং

বিজ্ঞপ্তি: এটি আপনার ইউআরএল প্যারামগুলিকে পুনরায় সেট করবে। ক্রেতা হুঁশিয়ার.

— স্ট্যাভম

Answer 2

এটি একই হবে, এর সাথে সম্পর্কিত কিছু নেই angular2। এটি সহজ এইচটিএমএল ট্যাগ।

মূলত 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

@ এস.লেম আপনি যা বলছেন তা আগেই, #অ্যাঙ্গরটির অভ্যন্তরে প্রবেশের hrefফলে Angular1রুট প্রভাবিত হতে পারে..আমি আপনাকে ডিফল্ট পৃষ্ঠায় প্রেরণ করতে পারি (যদি সেখানে থাকে)

— পঙ্কজ পার্কার

আমি #কৌনিক 1.x মধ্যে এর প্রভাব জানি। আমি একটি লিঙ্ক চাই href=""যা কৌণিক ১.x এর মতো কৌণিক 2 তে কিছুই না করে want

— s.alem

@ এস.লেম তাই <a href="">My Link</a>করবেন..কিন্তু বর্তমানে এটি নিয়ে কী হচ্ছে?

— পঙ্কজ পার্কার

[রাউটারলিঙ্ক] = "" আপনার রুট থেকে ক্যোয়ারী প্যারামগুলি সরিয়ে দেবে, সম্ভবত আপনি যা চান তা সম্ভবত এটি নয়। আপনি কোয়েরি প্যারামগুলি সংরক্ষণ করতে পারেন, তবে এটি খুব বেশি দূরে চলে যাওয়ার মতো বলে মনে হচ্ছে

— নর্থুর 157

তবে বিকল্প 1: href="javascript:void(0);"আমার জন্য কাজ করে।

— পল কার্লটন

Answer 3

এটি কৌণিক 2 দিয়ে করার বিভিন্ন উপায় রয়েছে তবে আমি দৃ strongly়ভাবে এটি এক বাগের সাথে একমত নই। আমি কৌণিক 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})]);

এখানে কাজ করার একটি উদাহরণ সহ এক জনসাধারণ k

Comments

একটি বিশ্বব্যাপী, কৌণিক সমাধানের জন্য উত্সাহিত করুন, তবে আমি এটিকে সঠিক উত্তর হিসাবে গ্রহণ করছি না কারণ যেমনটি আমি বলেছিলাম, আমি কেবল একটি আউট বক্স সমাধানের সন্ধান করছি, যতক্ষণ না তারা নিশ্চিত করে যে সেখানে কোনও হবে না বা যতক্ষণ না সত্যই আমার প্রয়োজন হবে এটা। তবুও আপনাকে অনেক ধন্যবাদ।

— s.alem

সমস্যাটি pointer-eventsহ'ল আইই ( ক্যানিউজ ) এর সহায়তার অভাব (আমি একে অপরের পক্ষে আইই 11 দিয়ে বাইপাস করতে পারি), এবং এটি কনসোল থেকে লিঙ্কটি ক্লিক করতে বাধা দেয় না । আমি @ পঙ্কজ উত্তরটিকে সমর্থন করেছি কারণ এটি আমার দৃষ্টিকোণ থেকে সহজতম, আমার উত্তরটি কৌনিক 2 দিয়ে এটি করার একটি উপায়, আমি এটি আরও সহজ করে তুলতে পারি তবে সিএসএস নির্বাচকরা সীমিত are

— এরিক মার্টিনেজ

বুটস্ট্র্যাপের ট্যাব লিঙ্কগুলি (যেমন <a href="#tab-id">) ভাঙ্গতে মনে হচ্ছে

— xd6_

বুটস্ট্র্যাপ কোন মডিউলে কাজ করছে?

— 711

Answer 4

একজন আছরের কিছুতে নেভিগেট করা উচিত, তাই আমি অনুমান করি যে এটি চলার সময় আচরণটি সঠিক ছিল। আপনার যদি পৃষ্ঠায় কোনও কিছু টগল করার প্রয়োজন হয় তবে এটি আরও বোতামের মতো? আমি বুটস্ট্র্যাপ ব্যবহার করি যাতে আমি এটি ব্যবহার করতে পারি:

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

Comments

আমি এই সমাধানটি পছন্দ করি। যদি আপনি কোনও হাত দেখানোর জন্য কার্সার পেতে চান তবে স্টাইল = "কার্সার: পয়েন্টার" যুক্ত করুন।

— নিউম্যান

অনেক পরিস্থিতিতে একটি ভাল সমাধান, তবে সচেতন থাকুন যে কেবলমাত্র পাঠ্য ভিত্তিক অ্যাঙ্কারের চেয়ে বোতামটির বড় মাত্রা রয়েছে।

— ইয়াঙ্কি

@ অ্যানকি আপনি সিএসএসে এটি পরিবর্তন করতে পারেন, তবে আমি প্রস্তাব দিচ্ছি না ... আসলে, বোতামটি একটি বোতাম, এবং একটি লিঙ্ক একটি লিঙ্ক ... খুব দু: খজনক ওয়েবটি সাদা বা কালো নয়।

— আয়শ

Answer 5

আমি CSS এর সাহায্যে এই ব্যবহারটি ব্যবহার করছি:

/*** 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

এটি সহজ এবং সবচেয়ে মার্জিত সমাধান বলে মনে হচ্ছে।

— বেগুনি পিরানহা

সরল উত্তর 👍

— সুহাইল কেসি

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>

৪. আপনি যদি বুটস্ট্র্যাপ ব্যবহার করেন:

<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

নিম্নলিখিত হিসাবে আপনার ইভেন্টের ডিফল্ট আচরণ রোধ করতে হবে।

এইচটিএমএলে

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

Ts ফাইল এ

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

Answer 16

Angular2 আরসি 4 এর জন্য আপডেট হয়েছে:

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

এই জাতীয় প্রযুক্তি কেন খারাপ বলে কোন মন্তব্য হতে পারে?

— গ্রিগসন

আপনি যখন ক্লিক করতে চান না তখন কোডের সর্বত্র লিখন ক্লিক করা খারাপ

— জেনস অ্যালেনিয়াস

তবে এটিই আমি যা করতে চাই ঠিক তা হ'ল: কোডটিতে "কিছুই নেই-অন-ক্লিক" সক্ষম হিসাবে চিহ্নিত করুন, তবে নতুন বাক্য গঠনটিকে সমর্থন করুন। অনক্লিক = "জাভাস্ক্রিপ্ট: অকার্যকর" এর মতো নির্মাণগুলি সত্যিই কুৎসিত। এবং href = "#" বিশ্বাসযোগ্য নয়, কারণ তারা আপনার ভিউপোর্টকে শীর্ষে উঠতে পারে। সুতরাং আমি এর চেয়ে ভাল বিকল্প দেখতে পাচ্ছি না

— গ্রিগসন

আমি আপনার সমাধান পছন্দ। ধন্যবাদ.

— মাই হু লুই

আমার নতুন উত্তর পরীক্ষা করে দেখুন। আপনি যদি না চান তবে আকরটি তার বোতামটি 'টাইপ' নেভিগেট করতে পারে

— জেনস অ্যালেনিয়াস