実際のページコンテンツをロードするMainLayoutページを備えたBlazorアプリがあります@Body。
私の場合Index.razor、MainLayoutページ内に読み込まれます。
親ページにある子ページ（Index.razor）からメソッドを呼び出す方法はありますか。MainLayout.razor？
例：
MainLayout.razor
<div class="content">
<ul class="menu">
<li>menu item 1</li>
</ul>
@Body
</div>
@code
{
public async Task Test()
{
await JsRuntime.InvokeAsync<object>("console.log", "test parent");
}
}
Index.razor
<h1>This is the index page</h1>
<button @onclick="(async () => await btn_clicked())">Call parent method</button>
@code
{
// Call method in MainLayout
public async Task btn_clicked()
{
await parent.Test();
}
}
これは、カスケード値との組み合わせで実行できますEventCallback。
まず、のイベントコールバックを作成しますTest。これを行うには、MainLayout.razorに次のコードを追加します。
EventCallback btn_clicked => EventCallback.Factory.Create(this, Test);
または、このオブジェクトを1回だけ作成するようにするには、次を使用できます。
EventCallback _btn_clicked = EventCallback.Empty;
EventCallback btn_clicked {
get {
if (_btn_clicked.Equals(EventCallback.Empty))
_btn_clicked = EventCallback.Factory.Create(this, Test);
return _btn_clicked;
}
}
次に、このイベントコールバックを体にカスケードするようにしてください。
<CascadingValue Value=btn_clicked >
@Body
</CascadingValue>
次に、Index.razorコードで、プロパティを設定します。
[CascadingParameter]
public EventCallback btn_clicked { get; set; }
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加