각도로 앵커 태그에 클릭 부착

각도로 앵커 태그에 클릭 부착

닻 태그(ajax에서 오는)에 클릭 이벤트를 첨부하고 기본 리디렉션을 차단하려고 합니다.어떻게 각도를 맞추면 됩니까?

<ul>
    <li><a href="/abc"><p>abc</p></a></li>
    <li><a href="/abc1"><p>abc1</p></a></li>
    <li><a href="/abc2"><p>abc2</p></a></li>
    <li><a href="/abc3"><p>abc3</p></a></li>
</ul>

ints 파일:

constructor(elementRef: ElementRef, renderer: Renderer) { 
    this.listenFunc = renderer.listen(elementRef.nativeElement, 'click', (event) => {
        event.preventDefault();
        let target = event.target || event.srcElement || event.currentTarget;
        console.log(target);
    });  
}

이벤트가 모든 요소에 첨부됩니다. 앵커 태그로만 제한하려면 어떻게 해야 합니까?

모든 도움은 감사히 받겠습니다.

를 사용할 수 있습니다(이는 다음과 같습니다).href각 의 경우, 와 같이 이벤트를 각 2+)우,합니다.

<a [routerLink]="" (click)="onGoToPage2()">Go to page</a>

제 생각에 당신은 앵글이 당신을 위해 일하지 못하게 하는 것 같습니다.

각도 2에서:

1. 합니다를 합니다.href꼬리표를 던지다<a>페이지 전달을 방지합니다.
2. 그러면 평소의 각도 클릭 속성과 기능만 추가하면 됩니다.
3. style: "cursor: pointer"

를 시킬 수 .[routerLink]="[]" 인용문 안의 대괄호가 중요합니다.메소드 등에서 기본 작업을 방지할 필요가 없습니다.이것은 "!!" 메서드와 유사하지만 메서드의 시작에 불명확한 구문을 추가할 필요가 없습니다.

따라서 전체 앵커 태그는 다음과 같습니다.

<a [routerLink]="[]" (click)="clickMethod()">Your Link</a>

여러분의 방법이 정확하게 작동하는지 확인해보세요. 그렇지 않으면 여러분은 대신 페이지를 새로 고치게 되고 실제로 무엇이 잘못된 것인지에 대해 매우 혼란스러워 질 수 있습니다!

당신은 단지 추가하기만 하면 됩니다.!!전전:(click)="!!onGoToPage2()".!!메서드 반환을 부울로 변환하여 기본 작업이 발생하지 않도록 합니다.void 이것이 가 될 것입니다.false.

로드하는 데 , 에서 이 수 .routerlink=".":

<a routerLink="." (click)="myFunction()">My Function</a>

https://material.angular.io/components/button/examples 버튼의 Angular Material 문서에서 영감을 받았습니다.

사용을 시작한 업데이트routerLink=""각 각 12로 .그 사실을 알고 있었습니다.routerLink="."부모 페이지로 전송하고 있었습니다.

<a href="#" (click)="onGoToPage2()">Go to page 2</a>

다음과 같은 것을 시도해 볼 수 있습니다.

<a href="javascript: void(0);" (click)="method()">

오어

<a href="javascript: void(0);" [routerLink]="['/abc']">

<a href="javascript:void(0);" (click)="onGoToPage2()">Go to Page 2</a>

저는 Angular 5에서 이 문제를 접했는데 여전히 링크를 따라가고 있습니다.다로 이었습니다.false페이지가 새로 고쳐지지 않도록 하려면 다음과 같이 하십시오.

html

<a href="" (click)="openChangePasswordForm()">Change expired password</a>

ts

openChangePasswordForm(): boolean {
  console.log("openChangePasswordForm called!");
  return false;
}

이를 성공적으로 구현할 수 있었습니다.

<a [routerLink]="['/login']">abc</a>

저는 효과적인 해결책을 얻기 위해 몇 개의 답을 조합해야 했습니다.

이 솔루션은 다음과 같습니다.

• 적절한 'a' 스타일로 링크 스타일을 지정합니다.
• 원하는 함수를 호출합니다.

• http://mySite/#로 이동하지 않음

  <a href="#" (클릭)="!!!함수ToCall()">링크 </a>

사용가능routerLink의 대안인.href각2의 경우** 쓰임routerLinkhtml 의 아래와 같이

<a routerLink="/dashboard">My Link</a>

그리고 당신의 것을 등록해야 합니다.routerLinkmodules.ts 또는 router.ts에서 이와 같이

const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent }
]

앵커 태그와 href를 깨끗하게 처리하고 앵커 스타일링을 유지하는 방법:

html:

패스 인 더$event위에click

<a href (click)="doSomething($event)">Do something</a>

활자 스크립트:

이벤트 가져오기:MouseEvent부름e.preventDefault()

doSomething(e: MouseEvent): void {
    e.preventDefault();

    //Do something
}

스타일은 그대로 유지되며 기본 브라우저 앵커 처리는 수행되지 않습니다.

이 질문은 엄밀히 말하면 이미 답을 얻었지만, 여기에 있는 모든 답은 중요한 것을 잊어버렸다고 생각합니다. 클릭 핸들러를 추가하는 것만으로는 충분하지 않습니다.내게 필요한 이유로 키보드만 사용하는 사용자도 링크를 사용할 수 있습니다.일반적으로 요소에 초점을 맞추는 동안 Enter를 누르면 요소를 클릭하는 것과 동일한 효과가 발생합니다.우리가 하는 동안 역할도 정할 수 있을 겁니다.링크가 실제로 버튼으로 사용되는 경우 역할="버튼"을 설정해야 합니다. 이렇게 하면 화면 판독기가 탐색 링크가 아니라 버튼으로 알립니다.원래 문제의 경우:여기 있는 거의 모든 답변이 제게 맞는 것 같지만, 저는 라우터 링크가 비어 있는 것을 선택했습니다. 저는 내비게이션을 원하지 않는다는 것을 의미론적으로 분명히 한다고 생각합니다.다른 솔루션은 나중에 혼란을 초래할 수 있습니다(누군가가 1년 안에 코드를 읽었다고 가정해 보겠습니다).

<a [routerLink]="" (click)="doSomething()" (keyup.enter)="doSomething()" role="button" tabindex="0">your link</a>

효과가 있었습니다.

<a class="btn-link" (click)="clickedFunction()">Click me</a>

위의 답변을 모두 검토해 보았습니다. 예상대로 작동하려면 두 가지만 실행하면 됩니다.

단계 - 1 : HTML 페이지의 앵커 태그에 (클릭) 이벤트를 추가하고 외부 링크로 이동할 때 명시적으로 href=" "를 제거하고 대신 routerLink = "를 사용하여 보기를 탐색합니다.

<ul>
  <li><a routerLink="" (click)="hitAnchor1($event)"><p>Click One</p></a></li>
  <li><a routerLink="" (click)="hitAnchor2($event)"><p>Click Two</p></a></li>
</ul>

Step - 2 : 위의 함수를 호출하여 클릭 이벤트를 .ts 파일의 닻 태그(ajax에서 오는 것)에 첨부합니다.

  hitAnchor1(e){
      console.log("Events", e);
      alert("You have clicked the anchor-1 tag");
   }
  hitAnchor2(e){
      console.log("Events", e);
      alert("You have clicked the anchor-2 tag");
   }

그게 전부입니다.예상했던 대로입니다.아래 예제를 만들었습니다. 보실 수 있습니다:-

https://stackblitz.com/edit/angular-yn6q6t

언급URL : https://stackoverflow.com/questions/41458842/attaching-click-to-anchor-tag-in-angular