我有这个Blazor页面
@page "/bearoffdata"
@using BlazorBoinq.Components
<h3>Bearoff Data</h3>
<Position_Hex_IdPair />
<PositionData />
@code {
}
具有这两个Razor组件：
@using BlazorBoinq.Data
@using BgBearoffCoreNamespace;
@inject BgBearoffService BoService
<label>Position</label>
<input type="text" spellcheck="false" @bind-value="@PositionText" @bind-value:event="oninput" />
<span> = </span>
<input type="number" step="1" @bind-value="@PositionId" @bind-value:event="oninput" />
<label>Id</label>
@code {
BgBearoffCore BgBo;
protected override async Task OnInitializedAsync()
{
BgBo = await BoService.GetBgBearoffAsync();
}
private Int64 positionId;
private String positionText;
protected Int64 PositionId
{
get => positionId;
set
{
positionId = value;
if (positionId > 0 && positionId <= BgBo.MaxId)
{
positionText = BgBearoffCore.menOnPointToHexString(BgBo.getMenOnPointFromInvariantId(positionId));
}
else
positionText = "";
}
}
protected String PositionText
{
get => positionText;
set
{
positionText = value;
if (BgBo.IsValidHexPosition(positionText))
positionId = BgBo.getInvariantIdFromPosition(positionText);
else
positionId = 0;
}
}
}
和
@using BlazorBoinq.Data
@using BgBearoffCoreNamespace;
@inject BgBearoffService BoService
<button class="btn btn-primary" @onclick="ShowBearoffInfo">Show Data</button>
<br>
<textarea cols="36" rows="36" readonly @bind="@BearoffInfo" />
@code {
BgBearoffCore BgBo;
protected override async Task OnInitializedAsync()
{
BgBo = await BoService.GetBgBearoffAsync();
}
private String bearoffInfo = "";
public String BearoffInfo
{
get => bearoffInfo;
set { }
}
protected void ShowBearoffInfo()
{
bearoffInfo = BgBo.getPositionInformationText(86);
}
}
我想将第一个组件的PositionId传递给第二个组件，因此我可以用PositionId参数替换最后一行中的硬编码86。尝试发布此信息时出现错误
您的帖子似乎主要是代码；请添加更多详细信息。
我不太确定要添加哪些细节可以帮助某人回答这个问题。
答案 0 :(得分：1)
这是一种可行的解决方案，因为您可以访问所使用组件的代码，所以这可能是可行的。
此解决方案包括三个步骤：
第1步：在第一个组件中定义一个事件回调。
这将允许您在属性更改时通知父组件（您的页面）。
将您的PositionId属性声明为公共参数。
[Parameter] public int PositionId
您可以保留获取器和设置器的原样。
将输入更改为此：
<input type="text" spellcheck="false" @oninput="OnPositionIdChanged" />
声明这样的事件回调：
[Parameter] public EventCallback<int> PositionIdChanged { get; set; }
然后定义一个方法来处理更改，如下所示：
private Task OnPositionIdChanged(ChangeEventArgs e)
{
PositionId = int.Parse(e.Value.ToString());
return PositionIdChanged.InvokeAsync(PositionId);
}
现在，当输入中的值更改时，将引发EventCallback。
第2步：在第二个组件中定义一个参数。
这将允许您将值从父组件（您的页面）传递到第二个组件中。
像这样声明一个公共参数：
[Parameter] public int APositionId {get; set; }
第3步：在父组件（您的页面）中定义一个属性。
在这里，您定义一个属性，在第一个组件中的属性值更改时更新它，然后将该值提供给第二个组件中的参数。
在页面中定义属性，如下所示：
private int SuppliedPosition { get; set; }
将其连接到第一个组件中的更改通知器，如下所示：
<Position_Hex_IdPair @bind-PositionId="SuppliedPosition" />
将其提供给第二个组件中的参数，如下所示：
<PositionData APositionId="@SuppliedPosition"/>
我对每个其他属性的命名都略有不同，因此希望可以清楚地知道是哪个。
就是这样！该解决方案的缺点是它需要您更改组件，并向页面中添加代码。
Blazor文档中提供了有关事件回调和参数的更多信息：Blazor docs。
希望这会有所帮助。
答案 1 :(得分：0)
是的，您有两个不直接相关的控件，因此您不能只是简单地传递参数。
两个选项：
或状态管理。对于州管理，这可能会有所帮助： Implementing State Management In Blazor
您有一个这样的课程：
using System;
public class CounterState
{
// _currentCount holds the current counter value
// for the entire application
private int _currentCount = 0;
// StateChanged is an event handler other pages
// can subscribe to
public event EventHandler StateChanged;
// This method will always return the current count
public int GetCurrentCount()
{
return _currentCount;
}
// This method will be called to update the current count
public void SetCurrentCount(int paramCount)
{
_currentCount = paramCount;
StateHasChanged();
}
// This method will allow us to reset the current count
public void ResetCurrentCount()
{
_currentCount = 0;
StateHasChanged();
}
private void StateHasChanged()
{
// This will update any subscribers
// that the counter state has changed
// so they can update themselves
// and show the current counter value
StateChanged?.Invoke(this, EventArgs.Empty);
}
}
您可以像这样将其注册在startup.cs文件中：
services.AddScoped<CounterState>();
您可以在每个.razor控件中像这样引用它：
@inject CounterState CounterState
一个控件可以设置这样的值：
// Call the GetCurrentCount() method
// to get the current count
int CurrentCount = CounterState.GetCurrentCount();
// Increase the count
CurrentCount++;
// Set Current count on the Session State object
CounterState.SetCurrentCount(CurrentCount);
位于应用程序中任意位置的另一个控件可以接收如下值：
// This method is called when the control is initialized
protected override void OnInitialized()
{
// Subscribe to the StateChanged EventHandler
CounterState.StateChanged +=
OnCounterStateAdvancedStateChanged;
}
// This method is fired when the CounterState object
// invokes its StateHasChanged() method
// This will cause this control to invoke its own
// StateHasChanged() method refreshing the page
// and displaying the updated counter value
void OnCounterStateAdvancedStateChanged(
object sender, EventArgs e) => StateHasChanged();
void IDisposable.Dispose()
{
// When this control is disposed of
// unsubscribe from the StateChanged EventHandler
CounterState.StateChanged -=
OnCounterStateAdvancedStateChanged;
}
答案 2 :(得分：0)
您也可以使用Rx.Net。
您可以使用这样的服务。
public interface IThemeMessageService<T>
{
void SendMessage(ActionMessage<T> message);
IObservable<ActionMessage<T>> GetMessage();
}
public class ThemeMessageService<T>: IThemeMessageService<T>
{
private readonly Subject<ActionMessage<T>> _subject = new Subject<ActionMessage<T>>();
public void SendMessage(ActionMessage<T> message) => _subject.OnNext(message);
public IObservable<ActionMessage<T>> GetMessage() => _subject;
}
发送消息：
var actionMessage = new ActionMessage<MyData>
{
Emitter = ThemeMessageEmitter.Component1,
Data = data
};
ThemeMessageService.SendMessage(actionMessage);
接收消息：
ThemeMessageService.GetMessage().Subscribe(p =>
{
data= p.Data;
});
消息类别：
public class ActionMessage<T>
{
public ThemeMessageEmitter Emitter { get; set; }
public T Data { get; set; }
}
发射器：您可以在此处注册发送数据的组件
public enum ThemeMessageEmitter
{
Component1 = 1,
Component2 = 2,
}
别忘了在Startup中注册服务
services.AddSingleton(typeof(IThemeMessageService<MyData>), typeof(ThemeMessageService<MyData>));
您可以在我的blazor管理员主题中查看所有操作 https://github.com/amuste/BlazorAdminDashboard/tree/master/BlazorAdminDashboard.Client/Shared/Theme