Отключить ссылку в angular 2+
Я пытаюсь отключить ссылку до тех пор, пока в Angular 6 не будет выполнен вызов API. Я хочу, чтобы ссылка была отключена до тех пор, пока не будет возвращен API getSelectedDealer ().
<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>
Вот код для компонента тега «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;
}
В основном мне нужно, чтобы элементы «ссылка на меню» были отключены перед вызовом API и были включены после.
Просто установите флаг disabled на true по умолчанию. И сбросьте его до желаемого значения после возврата вызова API.
По умолчанию свойство Disabled не существует в теге a. Должен ли я установить флаг переключения для отключенного в базовом теге 'a' или в ссылке меню?
@LDB: Извините, я не понял, что это привязка, хотя я добавил ответ, почему ваш подход не работает ??
В основном я просто пытаюсь отключить ссылку, пока не будет возвращен _dealerPersistenceService.getSelectedDealer (). Этот метод находится в компоненте ссылки меню, а не в базовом теге 'a'. Могу ли я проверить, что этот метод был вызван и возвращен в базовом теге «a», или я могу поместить его в ссылку меню?
@LDB: Компонент, в котором находится ваш тег anchor, скажем, компонент anchorTag, это компонент anchorTag, дочерний компонент компонента menu-link?
Как вы можете видеть, тег «a» имеет класс «menu-link», который используется как тег «a». «Ссылка на меню» скрыта, если не был возвращен метод «_dealerPersistenceService.getSelectedDealer ()». Вместо того, чтобы скрывать «ссылку на меню» до тех пор, пока не будет возвращен API ... Я просто хочу, чтобы была показана «ссылка на меню», однако ее необходимо отключить.
Увидим это через некоторое время ..
@LDB: Извините за поздний ответ, вы можете увидеть мой отредактированный ответ ..
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Если вы хотите использовать что бы то ни было, вы можете добиться этого, просто добавив событие щелчка к этой ссылке с чем-то вроде этого:
<a [routerLink] = "route"
routerLinkActive = "active"
class = "menu-link"
[class.disabled] = "disabled ? true: null"
(click) = "check($event)">
В ТС:
isReady = false;
check = (event) => {
if (!this.isReady) {
event.preventDefault();
}
}
Итак, isReady - это логическая переменная вашего компонента, и она ложна, пока вы не захотите. Когда вы когда-либо щелкаете по этой ссылке, она проверяет, истинна ли она, но если она ложна, это предотвратит исходное поведение события, и ничего не сработает.
В вашем компоненте есть флаг, который сообщает, вернул ли API ..:
apiReturned = false;
ngOnInit() {
setTimeout(() => {
// simulating API call, sets to true after 5 seconds
this.apiReturned = true;
}, 5000);
}
И пусть ваш HTML выглядит так:
<a [class.disabled] = "apiReturned ? null: true" [href] = "apiReturned ? 'https://stackoverflow.com/users/9442497/ldb' : null" >Click Me!</a>
Здесь я также удалил href из anchor, когда он должен быть отключен.
РЕДАКТИРОВАТЬ
Если ваш тег привязки находится в другом компоненте, у вас есть два способа выполнить задачу.
- Отправьте маршрут и статус API компоненту
mat-linkи действуйте соответствующим образом. - Имейте службу, которая принимает значение статуса API от родительского компонента и использует данные службы в компоненте
mat-link. Я бы предпочел использовать службу, потому что вам также придется заблокировать маршрут из строки URL-адреса, когда API не вернулся, с помощью ввода вы можете заблокировать только ссылку, но это не поможет, если кто-то напрямую вводит URL-адрес маршрута в URL-адрес бар. Вы можете использовать AngularRoute Guardдля предотвращения маршрутизации в таких случаях.
Я объясню использование первого способа, а второй оставлю вам.
В вашем mat-link component.ts есть что-то вроде:
export class MatLinkComponent {
@Input() route: string;
@Input() apiReturned: boolean;
}
И в вашем mat-link.component.html есть что-то вроде:
<a *ngIf = "!apiReturned" href = "#" [class.disabled] = "!apiReturned" >Click Me!</a>
<a *ngIf = "apiReturned" [routerLink] = "route" routerLinkActive = "active" >Click Me!</a>
Вы могли заметить, что я создал два условных тега anchor, потому что routerlink не принимает null, и у нас еще нет чего-то вроде условного routerLink.
В родительском компоненте, скажем, app.component.html или там, где вы используете mat-link.component, укажите что-то вроде:
<mat-link
[apiReturned]=apiReturned
[route] = "'routinghere'">
</mat-link>
Вы можете увидеть рабочий пример здесь: Пример. Ссылка Click Me! активируется через 10 секунд.
Спасибо за ответ. Хорошо, я пробовал это. Сейчас все ссылки отключены, как если бы apiReturned = false. Вызываемый api - это _dealerPersistenceService.getSelectedDealer () ... Как вы можете видеть в моем коде выше, ссылка на меню скрыта до тех пор, пока не будет сделан этот вызов. Как мне переключиться на тег apiReturned = true 'a' после выполнения вызова?
Где бы вы ни выполняли вызов API, скажем, здесь вы будете делать это в компоненте App. Итак, если ваша служба возвращает Observable, вы можете сделать что-то вроде: _dealerPersistenceService.getSelectedDealer().subscribe((success)=>{// check success and then this.apiReturned = true })
Вызов API не является наблюдаемым
@LDB: тогда? Это обещание? Или вы подписываетесь в самой услуге?
Этот метод вызывается в файле .ts для компонента ссылки на меню. Метод выглядит так: getDealerId () {return this._dealerPersistenceService.getSelectedDealer (). Id; }. Могу я не просто переключить здесь свойство apiReturned? Не похоже, что я могу указать, что свойство существует в теге дочернего компонента 'a'
@LDB: Итак, когда вы вызываете этот метод? Установите для флага apiReturned значение true везде, где вы вызываете getDealerId()
Это то, что я пробовал .. Однако как мне получить доступ к логическому API в компоненте, в котором вызывается метод ?? Свойство (apiReturned) создается в «matlinkComponent» (который является дочерним компонентом). Мне нужно переключить это логическое значение в родительском компоненте, который вызывает метод ...
@LDB: apiReturned является свойством как родительского, так и дочернего. С самого начала. Это свойство родителя, которое затем отправляется как входное свойство дочернему элементу, то есть mat-link. Разве вы не открывали ссылку, которую я добавил в ответ как «Пример»? Вы увидите, что я переключаю флаг в самом родителе.
Angular нужен способ выборочного применения директив, но вот мое решение:
<a
(click) = "markAsRead(notification);notification.externalUrl || $event.preventDefault()"
[href] = "notification.externalUrl"
target = "_blank""
...>
<a [routerLink] = "route" routerLinkActive = "active" class = "menu-link" [disabled] = "apiReturned ? true : false " >. СapiReturnedв качестве свойства компонента ??