前言

我們介紹完了內建的九種輸入元件，今天來講講其他的內建元件，這邊預計會分成四天來說，有些內建元件可能會需要用到一篇文章的篇幅來做介紹，例如 CascadingValue、DynamicComponent 等等，以下正文開始

App

Blazor 建立專案時，就會建立 App.razor 其中使用 Router 元件設定用戶端路由

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <LayoutView Layout="@typeof(MainLayout)">
            <p role="alert">Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

Router

提供對應至目前瀏覽狀態的資料

屬性

  • Found 找到對應路由時要顯示內容
  • NotFound 找不到路由顯示的內容
  • OnNavigateAsync 取的新畫面的時候的Callback

Authentication

專案建立時在驗證類型勾選 個別使用者帳戶 

1
2
3
4
5
6
7

@page "/authentication/{action}"
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
<RemoteAuthenticatorView Action="@Action" />

@code{
    [Parameter] public string? Action { get; set; }
}
  • 設定驗證狀態的路由
  • 設定驗證狀態的 UI 內容
  • 管理驗證狀態

AuthorizeView

可以根據使用者是否取得授權來顯示不同的 UI 內容

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

<AuthorizeView>
    <Authorized>
        <h1>Hello, @context.User.Identity.Name!</h1>
        <p>You can only see this content if you're authorized.</p>
        <button @onclick="SecureMethod">Authorized Only Button</button>
    </Authorized>
    <NotAuthorized>
        <h1>Authentication Failure!</h1>
        <p>You're not signed in.</p>
    </NotAuthorized>
</AuthorizeView>

@code {
    private void SecureMethod() { ... }
}

<Authorized> 和 <NotAuthorized> 標籤的內容可以包含任意項目 如果沒有指定授權的條件，預設會使用 登入 登出來做判斷

ErrorBoundary

設計來處理例外情況的元件，用法類似 C# 的 try catch 在 MainLayout.razor 包裝內容

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<div class="main">
    <div class="content px-4">
        <ErrorBoundary>
            <ChildContent>
                @Body
            </ChildContent>
            <ErrorContent>
                <p class="errorUI">Nothing to see here right now. Sorry!</p>
            </ErrorContent>
        </ErrorBoundary>
    </div>
</div>

如果設定在版面配置上，不管在哪一個頁面中出現錯誤，都會看到錯誤的 UI，實務上建議將錯誤的範圍縮小。

Recover 方法可以重設為非錯誤的狀態

小結

今天講的元件中 ErrorBoundary 是比較需要深入的元件，錯誤處理是一件非常重要的事情，如果沒有處理好就會像這樣 行話稱為網站裸奔，如何做好錯誤攔截是需要特別注意的一件，明天會對 CascadingValue 元件做說明，主要的用途是將資料從上層的 Razor 元件 流向子系的元件