昨天提到當 @ 後面接著 Razor 保留關鍵字時，它才會轉換成 Razor 特定的標記，而今天就要來介紹第一批的關鍵字，也就是 Razor 指示詞(Directives)。

雖然都沒有特別提到，但第二天會先建舞台的用意，就是有一個環境可以練習道具，可以試著修改裡面的檔案來看每一個道具效果。

@attribute

@attribute 指示詞針對頁面增加屬性。

1
@attribute [Authorize]

使該頁面增加 [Authorize] 屬性。

@code

@code 指示詞針對頁面增加成員(欄位、屬性和方法)。

1
2
3
@code {
  private int currentCount = 0;
}

使該頁面增加私有數字欄位currentCount，且初始值為0。

@function

@functions 指示詞針對頁面增加成員(欄位、屬性和方法)。

疑～怎麼重複了？因為 @code 和 @functions 真的是一樣的作用，為了使程式碼語意更清楚，官方建議加入欄位或屬性使用 @code，而加入方法則使用 @functions。

而昨天說的區域函式建議寫在 @function 裡。

1
2
3
4
5
6
@functions{
   private void IncrementCount()
    {
        currentCount++;
    }
}

使該頁面增加私有方法IncrementCount，並與剛剛增加的currentCount欄位互動。

@implements

@implements 指示詞針對頁面加入需實作的介面。

1
2
3
4
5
6
7
8
9
@implements IDisposable

@functions {
    private bool _isDisposed;

    // ...

    public void Dispose() => _isDisposed = true;
}

使該頁面必須實作IDisposable介面的方法。

@inherits

@inherits 指示詞針對頁面加入繼承的父類。

先新增 CustomRazorPage.razor 檔案，並加入內容。

1
2
3
4
@* CustomRazorPage.razor *@
@code {
    public string CustomText = "嗨嗨，我是米歐。";
}

就可以使用：

1
2
3
@inherits CustomRazorPage

<p>@CustomText</p>

使該頁面能夠使用父類CustomRazorPage內所能存取的成員。

@inject

@inject 指示詞針對頁面注入對應服務。

1
@inject HttpClient httpClient

使該頁面能夠從 DI 容器中取得HttpClient實體。

後續文章將針對相依性注入詳細介紹。

@layout

@layout 指示詞針對頁面加入版面配置元件。

1
@layout MainLayout

使該頁面增加MainLayout版面配置。

後續文章將針對版面配置詳細介紹。

@page

@page 指示詞設定頁面路由。

1
@page "/counter"

使該頁面的進入點為/counter。

後續文章將針對路由詳細介紹。

@using

@using 指示詞針對頁面加入其他命名空間的別名。

1
@using System;

使該頁面能夠直接瀏覽System命名空間。

以上就是第一批魔術道具 Razor 指示詞的所有介紹與用途啦。

感謝大家的閱讀，我們明天見。

參考資料
Razor 語法 - 指示詞