Создание пользовательского компонента Blazor

Я начинаю с веселья Blazor, и одна из первых вещей, которые я пытаюсь сделать, это обернуть пункты меню в пользовательские компоненты, чтобы сделать навигацию более читабельной.

Я пробую что-то в этом роде:

Файл: Компоненты\MenuItem.razor

<AuthorizeView Roles = "@Roles">
    <li class = "nav-item px-3">
        <NavLink class = "nav-link" href = "@Link">
            <span class = "oi oi-task" aria-hidden = "true"></span> @Text
        </NavLink>
    </li>
</AuthorizeView>
@code {
    public string Link { get; set; }
    public string Text { get; set; }
    public string Roles { get; set; }
}

Но если я использую компонент вместо идентичного содержимого в навигации, при запуске приложения ничего не загружается.

в моем навигационном меню, добавив следующее

<VM.Web.Components.MenuItem Text = "Approve user requests" Link = "/users/pending-approval" Roles = "ADMIN, CREW" />

останавливает загрузку страницы (ошибок не вижу) но следующее прямо в навменю работает

<AuthorizeView Roles = "ADMIN, CREW">
    <li class = "nav-item px-3">
        <NavLink class = "nav-link" href = "/users/pending-approval">
            <span class = "oi oi-task" aria-hidden = "true"></span> Approve user requests
        </NavLink>
    </li>
</AuthorizeView>

Обновлять, Проблема заключалась в том, что мне не хватало украшения [Параметр], после этого оно заработало

Окончательный код компонента выглядит так

<AuthorizeView Roles = "@Roles">
    <li class = "nav-item px-3">
        <NavLink class = "nav-link" href = "@Link">
            <span class = "@SpanClasses" aria-hidden = "true"></span> @Text
        </NavLink>
    </li>
</AuthorizeView>
@code {
    [Parameter]
    public string Link { get; set; }

    [Parameter]
    public string Text { get; set; }

    [Parameter]
    public string Roles { get; set; }

    [Parameter]
    public string SpanClasses { get; set; }
}

Для справки, Модуль аутентификации был реализован другим программистом и работает :), настроен он так

builder.Services
    .AddOidcAuthentication(options =>
    {
        builder.Configuration.Bind("oidc", options.ProviderOptions);
        options.UserOptions.RoleClaim = "role";
        options.AuthenticationPaths.LogInFailedPath = "/";
        options.AuthenticationPaths.LogOutSucceededPath = "/";
        options.AuthenticationPaths.LogOutCallbackPath = "/authentication/logout-callback";
    })
    .AddAccountClaimsPrincipalFactory<ArrayClaimsPrincipalFactory<RemoteUserAccount>>();

AuthorityConnection = builder.Configuration.GetSection("oidc:Authority").Value;

Разве ваши общедоступные свойства не нуждаются в аннотации [Parameter]?

Lex 22.12.2020 18:49

В этом была проблема.

buildcomplete 23.12.2020 10:51
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
1
2
267
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

прямо в навменю работает

<AuthorizeView Roles = "ADMIN, CREW">

Сообщает мне, что ваши роли передаются в WebAssembly

Я нашел это полезным при передаче пунктов меню в виде данных. Мне нужно было обслуживать неавторизованные, авторизованные и добавленные мной роли.

Фабрика утверждений, предоставленная Enet, также необходима, если у кого-либо из пользователей есть более одной роли, поскольку они поступают в формате, разделенном запятыми.

OptionalRolesAuthorizeView.razor

@if (string.IsNullOrWhiteSpace(Roles) && RequireAuthentication == false)
{
    @ChildContent
}
else
{
    <AuthorizeView Roles = "@Roles">
        @ChildContent
    </AuthorizeView>
}
@code {
    [Parameter]
    public bool RequireAuthentication { get; set; }

    [Parameter]
    public string Roles { get; set; }

    [Parameter]
    public RenderFragment ChildContent { get; set; }
}

MenuItemView.razor

<OptionalRolesAuthorizeView RequireAuthentication = "@Model.RequireAuthentication" Roles = "@Model.Roles">
    <li class = "nav-item px-3">
        <NavLink class = "nav-link" href = "@Model.Href" Match = "@Model.Match">
            <span class = "@Model.IconClass" aria-hidden = "true"></span> @Model.Label
        </NavLink>
    </li>
</OptionalRolesAuthorizeView>
@code {
    [Parameter]
    public MenuItem Model { get; set; }
}

MenuItem.cs

using Microsoft.AspNetCore.Components.Routing;
public class MenuItem
{
    public string Label { get; set; }
    public string Href { get; set; }
    public string IconClass { get; set; }
    public bool RequireAuthentication { get; set; }
    public NavLinkMatch Match { get; set; }
    public string Roles { get; set; }
}

Также стоит посмотреть полисы.

спасибо, я должен изучить этот aspNetCore MenuItem!

buildcomplete 23.12.2020 11:08

Другие вопросы по теме