javascript 禁用 angular 中的链接 2+
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51445378/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable a link in angular 2+
提问by LDB
I'm attempting to disable a link until an API call is made in Angular 6. I want the link to be disabled until the getSelectedDealer() API is returned.
我正在尝试禁用链接，直到在 Angular 6 中进行 API 调用。我希望在返回 getSelectedDealer() API 之前禁用链接。
<menu-link *ngIf="perms.has(perms.TOP_OFFERS) && _dealerPersistenceService.getSelectedDealer()"
route="/dynamic-journeys/{{getDealerId()}}/vehicles">
<menu-item><img src="/assets/menu-icons/top-offers.svg">Dynamic Journeys</menu-item>
</menu-link>
Here is the code for the 'a' tag component and the CSS.
这是“a”标签组件和 CSS 的代码。
<a [routerLink]="route" routerLinkActive="active" class="menu-link" [class.disabled]="disabled ? true: null">
<ng-content select="menu-item"></ng-content>
a.disabled {
pointer-events: none;
cursor: default;
}
Basically I need the 'menu-link' items to be disabled prior to API call and be enabled after.
基本上我需要在 API 调用之前禁用“菜单链接”项并在之后启用。
回答by dAxx_
If you want to use no matter what, you could achieve that by simply add click event to this link with something like that:
如果你无论如何都想使用，你可以通过简单地向这个链接添加点击事件来实现：
<a [routerLink]="route" routerLinkActive="active" class="menu-link" [class.disabled]="disabled ? true: null" (click)="check($event)">
In TS:
在 TS 中：
isReady = false;
check = (event) => {
if (!this.isReady) {
event.preventDefault();
}
}
So isReady is a boolean variable of your component, and it is false until you want to. When ever you click this link, it will check if it is true, but if it is false, it will prevent the original behavior of the event, and nothing will fire.
所以 isReady 是你的组件的一个布尔变量，它是假的，直到你想要。当您单击此链接时，它会检查它是否为真，但如果为假，它将阻止事件的原始行为，并且不会触发任何内容。
回答by Ashish Ranjan
In your component have a flag which tells whether the API has returned..:
在您的组件中有一个标志，用于说明 API 是否已返回..：
apiReturned = false;
ngOnInit() {
setTimeout(() => {
// simulating API call, sets to true after 5 seconds
this.apiReturned = true;
}, 5000);
}
And have your HTML like:
并让您的 HTML 像：
<a [class.disabled]="apiReturned ? null: true" [href]="apiReturned ? 'https://stackoverflow.com/users/9442497/ldb' : null" >Click Me!</a>
Here I have also removed the hreffrom the anchorwhen it is supposed to be disabled.
在这里，我还href从anchor应该禁用的时间中删除了。
EDIT
编辑
If your anchor tag resides in a different component, then you have two ways to perform the task.
如果您的锚标记驻留在不同的组件中，那么您有两种方法来执行该任务。
- Send the Route and the API's status to the
mat-linkcomponent and act accordingly - Have a service which takes the value of API status from the parent component and use the service's data in
mat-linkcomponent. I would prefer using a service because you will also have to block the route from the URL bar when the API has not returned, using Input you can only block the link, but that will not help if someone directly enters the route url in the URL bar. You can use Angular'sRoute Guardto prevent routing in such cases
- 将路由和 API 的状态发送到
mat-link组件并采取相应的行动 - 有一个服务，它从父组件中获取 API 状态的值，并在
mat-link组件中使用服务的数据。我更喜欢使用服务，因为当 API 未返回时，您还必须阻止来自 URL 栏的路由，使用 Input 您只能阻止链接，但如果有人直接在 URL 中输入路由 url，这将无济于事酒吧。Route Guard在这种情况下，您可以使用 Angular来防止路由
I will explain the usage of the first way and leave the second way for you to implement.
我将解释第一种方式的用法，第二种方式留给您实现。
In your mat-linkcomponent.ts, have something like:
在你的mat-linkcomponent.ts 中，有类似的东西：
export class MatLinkComponent {
@Input() route: string;
@Input() apiReturned: boolean;
}
And in your mat-link.component.html, have something like:
在你的mat-link.component.html, 有类似的东西：
<a *ngIf="!apiReturned" href="#" [class.disabled]="!apiReturned" >Click Me!</a>
<a *ngIf="apiReturned" [routerLink]="route" routerLinkActive="active" >Click Me!</a>
You could notice that I have created two anchortags which are conditional, this is because, routerlinkwon't accept nulland we don't have something like conditional routerLinkyet.
您可能会注意到我创建了两个anchor条件标签，这是因为routerlink不会接受，null而且我们还没有类似条件的标签routerLink。
In the parent component, say app.component.htmlor wherever you are using mat-link.component, have something like:
在父组件中，比如说app.component.html或者无论你在哪里使用mat-link.component，都有类似的东西：
<mat-link
[apiReturned]=apiReturned
[route]="'routinghere'">
</mat-link>
You can See a working example here: Example. The Click Me!link will activate after 10 seconds..
您可以在此处查看工作示例：示例。在Click Me!10秒后链接将激活..
回答by robert king
Angular needs a way to selectively apply directives, but here was my solution:
Angular 需要一种方法来选择性地应用指令，但这是我的解决方案：
<a
(click)="markAsRead(notification);notification.externalUrl || $event.preventDefault()"
[href]="notification.externalUrl"
target="_blank""
...>
