我有一個包含兩個組件的 Blazor Wasm 應用程式：
BaseComp.razor:
<h1>I'm base - @Text</h1>
@code{
protected string Text {get; set;} = "Default";
}
子組件.razor
@inherits BaseComp
<BaseComp/>
<h1>Hello, only child text!</h1>
@code {
protected override void OnInitialized()
{
Text = "new";
}
}
在頁面上將顯示以下內容：
I'm base - Default
Hello, only child text!
我怎樣才能Text從 childComponent 更新 baseComponent 的屬性？
uj5u.com熱心網友回復：
有了這段代碼
@inherits BaseComp
<BaseComp/> @* a new instance, not inheritance *@
您繼承自BaseComp并與之組合。您沒有使用繼承部分。
因此，僅使用組合并按照@MarvinKlein 的回答進行操作，但洗掉該@inherits行。或者將代碼更改為：
@inherits BaseComp
@*<BaseComp />*@
@{ base.BuildRenderTree(__builder); }
<h1>Hello, only child text!</h1>
uj5u.com熱心網友回復：
您需要將其宣告為引數并將值傳遞下去。
BaseComp.razor:
<h1>I'm base - @Text</h1>
@code{
[Parameter] public string Text {get; set;} = "Default";
}
子組件.razor
<BaseComp Text="Text"/>
<h1>Hello, only child text!</h1>
@code {
protected override void OnInitialized()
{
Text = "new";
}
}
uj5u.com熱心網友回復：
我想使用基本組件在所有頁面上呈現相同的網格，但有一些額外的邏輯。
當前ComponentBase未設計的一種模板。
您可以：
- 使用設計用于執行此操作的不同基礎組件。
- 讓它與
ComponentBase.
這是如何使其與 ComponentBase 一起作業，因為描述如何構建不同的組件超出了 SO 答案的范圍。
我們的模板組件：
<h3 class="text-primary m-2 p-2">Template</h3>
<div class="bg-primary text-white m-2 p-2">
@this.Body
</div>
@code {
protected abstract RenderFragment? Body { get; }
}
和代碼隱藏檔案使其抽象化。
public abstract partial class Template { }
我們的新Index. 這里的關鍵是我們的內容不再位于頂部塊 - Razor 編譯器符合的部分BuildRenderTree。相反，我們在一個單獨的RenderFragment.
我們的頂部塊現在包含RenderFragment屬性this.Body，我們已將基類的方法分配給該屬性，該BuildRenderTree方法包含來自模板的已編譯代碼。
@page "/"
@inherits Template
@this.Content
@code {
// Where we put the base Template class Render Fragment
private RenderFragment Content;
// Ctor - must call base and then we load the base Template class content
public Index() : base()
=> this.Content = (builder) => base.BuildRenderTree(builder);
// Our content that the Razor compiler will build in Body
// __builder is the built in Razor compiler RenderTreeBuilder
protected override RenderFragment Body => (__builder) =>
{
<PageTitle>Index</PageTitle>
<h1>Hello, world!</h1>
<div>Welcome to your new app.</div>
<SurveyPrompt Title = "How is Blazor working for you?" />
};
}
這是它的樣子：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/534573.html