Angular Anchor制定导航教程与实例

迪鲁宾
262 阅读4分钟

Angular Example an anchor bind tag click event without a href

本文介绍了如何为锚标签添加点击事件，并在页面的不同部分进行导航。 了解如何在不同的网页上进行导航，并动态地添加和删除HTML元素。

HTML锚标签在以下使用情况中使用：

  • 导航到不同的页面
  • 转到页面的特定div或部分，如顶部、底部或指定的div。
  • 动态地添加/删除HTML组件

我们有href标签来导航的目的吗？ 我们可以在Angular应用程序中使用href属性吗？

Angular不支持href，但是你可以使用属性绑定事件，例如，给它附加一个点击事件，在点击绑定事件中写一个导航代码。 没有href 属性，如何进行导航？

你必须写一段代码来处理锚点绑定事件。 每当使用点击锚点事件，它就会触发DOM事件绑定。

首先，使用ng CLI命令创建一个angular应用程序。 本文不包括如何创建一个angular应用程序。

让我们来看看锚点事件绑定的一些例子。

抛开href的锚点事件

在传统的应用程序中，锚点标签有href 和clicks 事件，但在Angular应用程序中不支持href 。

在HTML模板文件中，请添加一个带有点击事件的锚点标签，如下所示。

要点

  • href是不需要的，因为它可以转发请求。
  • 你也可以添加 href="javascript: void(0);"
  • 添加带调用功能的点击事件
  • 锚点显示为一个链接，改变风格为光标=指针，像按钮一样可以点击。
<div style="text-align:center">
    <h1>
       Angular Button Click Event Example
    </h1>
<a class ='btn' style="cursor:pointer"(click)="clickme();">click me</a>
or
<a href="javascript: void(0);" (click)="clickme()"> click here

    <h2>{{msg}}</h2>
 </div>

在你的模板代码中


import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  msg:string;
  constructor() {

   }

   clickme(){
    this.msg='anchor tag is Clicked';
    return this.msg;
  }
}

Angular anchor tag routeLink的例子？

使用链接，你可以从一个页面导航到另一个页面，或者在一个页面上从一个位置移动到另一个位置。

它在传统的javascript和jquery应用程序中使用锚href 属性来实现。

在Angular应用程序中，同样可以通过路由器的链接属性来实现，如下图所示。

在Angular组件的HTML文件中

[Home](https://www.cloudhadoop.com/about)

路由器链接路径必须在路由器文件中进行配置，如下图所示

 { path: 'home', component: HomeComponent }

在Angular组件中

<a routerLink="/home">
Home</a>

或使用绑定

<a [routerLink]="/home">
Home</a>

如何在Angular的新窗口中打开链接网址？

在这个例子中，你有一个Angular组件，它有一个链接，当用户点击它时，它会在一个新的浏览器标签或新窗口中打开一个新的链接网址。

在javascript中，我们有一个window. open method 来打开一个新窗口。

在angular组件中使用它是很容易和简单的。

这可以通过两种方式实现。

使用点击事件处理程序-- windows.open接受第一个参数为链接网址，第二个可选参数包含打开相同链接或新窗口的值。

在app.component.html文件中

<a (click)="openLink("www.cloudhadoop.com")">Go to cloudhadoop</a>

在typescript组件--app.component.ts文件--中

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

使用href属性

<a href="www.cloudhadoop.com/" target="_blank">Open </a>

如何在Angular组件中禁用锚点链接？

有时候，我们想根据typescript的变量来禁用锚点链接。

通常情况下，我们会通过以下多种方式禁用组件中的锚点链接。

第一种方法是使用类属性指令。

在component.css文件中 -

.disable{
  pointer-events:none;
}

和 component.html

<a href="#" [class.disable]="true">Add item</a>

第二种方法是使用style属性指令

<a href="#" [style.pointer-events]="'none" 
>Add item</a>

第三种方式使用ngClass指令。

<a [ngClass]="{'disabled': true}"> Add Item</a>

如何用点击事件禁用锚定标签？

这是一个以编程方式进行禁用的例子。

在typecript组件中声明一个变量--禁用，并以false初始化。

在点击事件中，更新被禁用为true。

app.component.ts文件-

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  isDisable:boolean=false;
  constructor() {

   }

   disableOtherLinks(){
      this.isDisable=true;
  }
}

HTML模板文件，我们有六个锚点链接，在点击第一个链接时，变量值被设置为true。

这个变量被用来绑定其他5个链接为禁用。

下面的条件属性是和

  • ngStyle属性
  • style.pointer-events
  • attr.disabled
  • ngClass

在app.component.html中 -

<a href="javascript: void(0);" (click)="disableOtherLinks()"> Disable All links except me

<a [ngStyle]="{'pointer-events': isDisable ? 'none': 'auto'}"
> Link1
<a  [style.pointer-events]="isDisable ?'none':'auto'">Link2</a>

<a  [style.pointer-events]="isDisable ?'none':'auto'">Link3</a>

<a [attr.disabled]="isDisable">Link4</a>
<a [ngClass]="{'disabled': isDisable}"> Link5</a>

总结

在angular中，不支持href，所以学习了多种方法，使用routelink和事件绑定点击事件来做导航。

avatar
文章
阅读
粉丝