Blazor 模板有這個：
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");
我知道什么App和HeadOutlet是（檔案中介紹了它們）。
一般是什么RootComponents？
我也可以添加自己的組件嗎？（那些可能是什么型別的組件？）
uj5u.com熱心網友回復：
RootComponents 一般是什么？
Renderer 需要一個 RenderTree 的起始節點。那是根組件。一個 WASM 應用程式可以有一個或多個。演示該描述可能更容易。
從 WebAssembly 模板創建一個專案。
這是一個修改后的 index.html。注意額外的 htmlDiv和Span元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>BlazorApp1</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="BlazorApp1.styles.css" rel="stylesheet" />
</head>
<body>
<div id="counter"></div>
<span id="useless"></span>
<div id="app">Loading...</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss">??</a>
</div>
<script src="_framework/blazor.webassembly.js"></script>
</body>
</html>
運行它，沒有什么不同。
現在修改Program以告訴應用程式映射Counter到具有適當 id 的 html 元素：
using BlazorApp1;
using BlazorApp1.Pages;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");
builder.RootComponents.Add<Counter>("#counter");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
await builder.Build().RunAsync();
您現在擁有三個 RenderTree。
我也可以添加自己的組件嗎？（那些可能是什么型別的組件？）
任何實作的類IComponent都可以是根組件。
這是一個演示：
public class TotallyUselessComponent : IComponent
{
private RenderHandle _renderHandle;
public void Attach(RenderHandle renderHandle)
=> _renderHandle = renderHandle;
public Task SetParametersAsync(ParameterView parameters)
{
_renderHandle.Render((builder) =>
{
builder.AddMarkupContent(0, $"<div class='alert alert-danger m-3'>I'm here but I'm totally Useless.</div>");
}
);
return Task.CompletedTask;
}
}
并更新Program
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");
builder.RootComponents.Add<Counter>("#counter");
builder.RootComponents.Add<TotallyUselessComponent>("#useless");
你得到什么的螢屏截圖。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/532988.html
標籤：C＃asp.net 核心西装外套blazor-webassembly
上一篇：Python中的“繼續”功能