#html #angular #typescript #angular8
#HTML #angular #typescript #angular8
Вопрос:
У меня есть приложение angular, и я создал страницу входа и панели мониторинга с использованием angular.А также я завершил навигацию между панелью входа и пользователя, а также вызвал API, который показывает данные в панели мониторинга.
Теперь мой вопрос в том, что мне нужно создать панель управления суперпользователя и компоненты панели управления администратора, и эти панели мониторинга содержат те же данные, что и предыдущая панель управления пользователя, и некоторую дополнительную информацию о пользователе на ней.(Из логина пользователя, superuserlogin, admin login Он должен перейти на определенную страницу панели мониторинга)
может ли кто-нибудь мне помочь, необходимо ли создать еще два компонента для панели управления суперпользователя, панели управления администратора и скопировать данные компонента userdashboard в компоненты панели управления суперпользователя и администратора.
Я новичок в этом приложении angular, может кто-нибудь помочь мне в этом.
Комментарии:
1. Я полагаю, у вас может быть «superdasboard», который имеет дочернюю панель вашей панели. «superdasboard» учитывает, когда регистрируется использование суперпользователем, а когда администратором
2. Можете ли вы кратко объяснить об этом. Я не понял того, что вы объясняете.
Ответ №1:
Есть несколько способов решения этой проблемы, но я бы сделал это:
- Разбейте компонент панели мониторинга на еще более мелкие компоненты, чтобы вы могли повторно использовать их позже на каждой из панелей мониторинга, избегая копирования-вставки шаблона
- Наследовать от базового класса панели мониторинга в любом другом классе панели мониторинга, чтобы вы использовали общую функциональность
- Используйте службу Angular для хранения данных, общих для каждой панели мониторинга, и внедрения их в компоненты вашей панели мониторинга.
- Создайте службы для панели управления суперпользователя и панели администратора для дополнительных данных, которые необходимо отобразить в этих компонентах
Службы — это, по сути, класс, который angular может внедрить в ваши компоненты во время выполнения и который обычно используется для хранения данных, совместно используемых многими компонентами подробнее о службах
Комментарии:
1. Спасибо@Shulkmaster .Разбивка компонентов панели мониторинга на более мелкие компоненты означает, что в компоненте панели мониторинга я должен создать другой компонент с именем superuser dashboard, верно??
2. Нет. Я не знаю, как выглядит ваша панель мониторинга, но давайте представим, что у вас есть базовая панель мониторинга с изображением пользователя, меню с 4 действиями, график, показывающий некоторые данные, и список элементов. таким образом, разбивка компонента означает, что вместо огромного компонента с большим количеством HTML и typescript вы вместо этого создаете 4 компонента: один для отображения информации о пользователе с его логикой включения, один для графики с собственным входом в другой угловой компонент, один для списка и так далее вкл., и все они совместно используют данные из сервиса.
3. Итак, подводя итог, компонент dashboard теперь представляет собой не один огромный компонент, а скорее компонент, состоящий из 4 компонентов, и таким же образом вы можете повторно использовать эти 4 компонента для создания других daahboards, это дает вам гибкость, например, для отображения компонента, который отображает список в базовом daahboar и super dashboard, но не в admin. Надеюсь, на этот раз я прояснил это для вас
4. Я создал панель мониторинга, в которой разместил панель навигации в верхней части, после чего разместил карту Google с левой стороны, а в правой части разместил данные, поступающие из серверной части. Теперь мне нужно добавить еще две панели мониторинга (суперпользователь, администратор), имеющие те же данные, что и панель мониторинга пользователя, и добавить к ней еще одну дополнительную таблицу. Итак, не могли бы вы помочь мне, как я могу разместить еще два компонента и добавить данные вместо копирования и вставки всех этих данных с панели управления пользователя.
5. Итак, основываясь на вашем описании, вы могли бы создать 3 меньших компонента из вашей базовой панели мониторинга, карты, навигационной панели и данных из серверной части, чтобы ваш шаблон базовой панели мониторинга выглядел следующим образом: «<app-navbar><app-navber /> <app-map></app-map><app-data></app-data> и теперь вы можете повторно использовать эти компоненты в своей super dashboard таким же образом <app-navbar><app-navber/> <app-map></app-map> <app-data></app-data> < app-extra-table></app-extra-table> конечно, добавление дополнительной информации, которая вам нужна, и совместное использование данных между компонентами с помощью сервиса
Ответ №2:
Приведенный ниже процесс будет работать, но может потребовать от вас немного кодирования
- Создайте или обновите свой
AuthenicationService, добавив функциюcan() - Когда пользователь входит в систему, убедитесь, что его информация и роль и / ИЛИ разрешения сохранены в службе, что-то вроде в интерфейсе
interface IUser {
id: number,
role: string,
permissions: string[],
// Other Properties here
}
- Обновите функцию can примерно так, как показано ниже
can(permission: string) {
if(this.user.role === 'super admin') return true;
if(this.user.permissions.includes(permission) return true;
return false;
}
Мы разрешаем суперадминистратору весь доступ, но для других пользователей мы проверяем, есть ли у них разрешение на выполнение чего-либо
- Внедрите службу аутентификации в компонент панели мониторинга и задайте свойства для нужных вам разделов с ограничениями, например, допустим, суперадминистратор может заблокировать пользователя, у нас может быть что-то вроде
constructor (private authenticationService: AuthenticationService, ...) {}
canBlocUser = this.authenticationService.can('block user')
- Наконец, в вашем пользовательском интерфейсе вы можете просто показывать или скрывать компоненты на основе значения свойства
<button *ngIf='canBlockUser'>Block User</button>