Получить текущий URL в компоненте Blazor - PullRequest
Новая
       107

Получить текущий URL в компоненте Blazor

0 голосов
/ 30 апреля 2018

Мне нужно знать URL текущей страницы, чтобы проверить, нужно ли применять определенный стиль к элементу. Код ниже является примером. 

@using Microsoft.AspNetCore.Blazor.Services
@inject IUriHelper UriHelper
@implements IDisposable

<h1>@url</h1>
<nav>
    <div class="nav-wrapper">
        <a href="#" class="brand-logo">Blazor</a>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
            <li>
                <NavLink href="/" Match=NavLinkMatch.All>
                    Home
                </NavLink>
            </li>
            <li>
                <NavLink href="/counter">
                    Counter
                </NavLink>
            </li>
            <li>
                <NavLink href="/fetchdata">
                    Fetch data
                </NavLink>
            </li>
        </ul>
    </div>
</nav>

@functions {

    private string url = string.Empty;

    protected override void OnInit()
    {
        url = UriHelper.GetAbsoluteUri();
        UriHelper.OnLocationChanged += OnLocationChanged;
    }

    private void OnLocationChanged(object sender, LocationChangedEventArgs e)
    {
        url = newUriAbsolute;
    }

    public void Dispose()
    {
        UriHelper.OnLocationChanged -= OnLocationChanged;
    }
}

Я использовал тот же подход, который использовался в компоненте NavLink в хранилище Blazor, но он не работал. Есть идеи?

Ответы [ 3 ]

0 голосов
/ 29 мая 2018

Вы должны прослушать LocationChange IUriHelper, который запускает функцию, чтобы сделать то, что вы хотите, например: 

@using Microsoft.AspNetCore.Blazor.Components
@using Microsoft.Extensions.Logging
@inject Microsoft.AspNetCore.Blazor.Services.IUriHelper UriHelper
@inject ILogger<NavItem> logger

<li class="m-menu__item @(Active ? "m-menu__item--active" : "")">
    <a href=@Url class="m-menu__link ">
        <span class="m-menu__item-here"></span>
        <i class="m-menu__link-icon @Icon"></i>
        <span class="m-menu__link-text">@Text</span>
    </a>
</li>

@functions {
    protected override void OnInit()
    {
        UriHelper.OnLocationChanged += OnLocationChanges;
    }
    [Parameter]
    private string Url { get; set; }
    [Parameter]
    private string Icon { get; set; }
    [Parameter]
    private string Text { get; set; }
    private bool Active = false;
    private void OnLocationChanges(object sender, string newLocation)
    {
        bool active = newLocation.Contains(Url);
        if(active != Active) //Only re-render the components that need it
        {
            Active = active;
            StateHasChanged();
            logger.LogInformation("Location Change To:" + newLocation);
        }
    }
}
0 голосов
/ 23 ноября 2018

Короче говоря, используйте GetAbsoluteUri () из IUriHelper:

1) Не забудьте установить UriHelper для инъекций на .cshtml: 

@inject Microsoft.AspNetCore.Components.Services.IUriHelper UriHelper

//for <= 0.7.0 versions use:
//@inject Microsoft.AspNetCore.Blazor.Services.IUriHelper UriHelper

или в наследовании базового класса для опыта "code-behind" .cs: 

[Inject] 
public Microsoft.AspNetCore.Components.Services.IUriHelper UriHelper {get; set;}

//for <= 0.7.0 versions use:
//[Inject] 
//public Microsoft.AspNetCore.Blazor.Services.IUriHelper UriHelper {get; set;}

2) Вызвать GetAbsoluteUri метод: 

string currentUrl = UriHelper.GetAbsoluteUri()

Отредактировано В версии 0.8.0 IUriHelper перемещено в Microsoft.AspNetCore.Components.Services пространство имен .

0 голосов
/ 30 апреля 2018

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

Вы должны зарегистрироваться на это событие в app.cshtml, так как оно не будет утилизировано.

...