RazorBiblioteki klas składników ASP.NET CoreASP.NET Core Razor components class libraries

01/12/2021
Czas czytania: 4 min

Składniki mogą być współużytkowane w Razor bibliotece klas (RCL) w różnych projektach.Components can be shared in a Razor class library (RCL) across projects. Razor Biblioteka klas składników może być dołączana z:A Razor components class library can be included from:

Inny projekt w rozwiązaniu.Another project in the solution.
Pakiet NuGet.A NuGet package.
Przywoływana Biblioteka platformy .NET.A referenced .NET library.

Podobnie jak składniki są zwykłymi typami .NET, składniki udostępniane przez RCL są normalnymi zestawami platformy .NET.Just as components are regular .NET types, components provided by an RCL are normal .NET assemblies.

Utwórz RCLCreate an RCL

Visual StudioVisual Studio
interfejs wiersza polecenia programu .NET Core.NET Core CLI

Tworzenie nowego projektu.Create a new project.
Wybierz Razor bibliotekę klas.Select Razor Class Library. Wybierz opcję Dalej.Select Next.
W oknie dialogowym Utwórz nową Razor bibliotekę klas wybierz pozycję Utwórz.In the Create a new Razor class library dialog, select Create.
Podaj nazwę projektu w polu Nazwa projektu lub zaakceptuj nazwę domyślną projektu.Provide a project name in the Project name field or accept the default project name. W przykładach w tym temacie użyto nazwy projektu ComponentLibrary .The examples in this topic use the project name ComponentLibrary. Wybierz przycisk Utwórz.Select Create.
Dodaj RCL do rozwiązania:Add the RCL to a solution:
1. Kliknij prawym przyciskiem myszy rozwiązanie.Right-click the solution. Wybierz pozycję Dodaj > istniejący projekt.Select Add > Existing Project.
2. Przejdź do pliku projektu RCL.Navigate to the RCL's project file.
3. Wybierz plik projektu RCL ( .csproj ).Select the RCL's project file (.csproj).
Dodaj odwołanie do RCL z aplikacji:Add a reference to the RCL from the app:
1. Kliknij prawym przyciskiem myszy projekt aplikacji.Right-click the app project. Wybierz pozycję Dodaj > odwołanie.Select Add > Reference.
2. Wybierz projekt RCL.Select the RCL project. Wybierz przycisk OK.Select OK.

Uwaga

Jeśli pole wyboru strony i widoki pomocy technicznej jest zaznaczone podczas generowania RCL z szablonu, Dodaj również _Imports.razor plik do katalogu głównego wygenerowanego projektu z następującą zawartością, aby włączyć Razor Tworzenie składników:If the Support pages and views check box is selected when generating the RCL from the template, then also add an _Imports.razor file to root of the generated project with the following contents to enable Razor component authoring:

@using Microsoft.AspNetCore.Components.Web

Ręcznie Dodaj plik do katalogu głównego wygenerowanego projektu.Manually add the file the root of the generated project.

Użyj szablonu Razor biblioteki klas ( razorclasslib ) za pomocą dotnet new polecenia w powłoce poleceń.Use the Razor Class Library template (razorclasslib) with the dotnet new command in a command shell. W poniższym przykładzie jest tworzony RCL o nazwie ComponentLibrary .In the following example, an RCL is created named ComponentLibrary. Folder, który ComponentLibrary ma zostać utworzony, jest tworzony automatycznie podczas wykonywania polecenia:The folder that holds ComponentLibrary is created automatically when the command is executed:
```
dotnet new razorclasslib -o ComponentLibrary
```
Uwaga

Jeśli -s|--support-pages-and-views przełącznik jest używany podczas generowania RCL z szablonu, Dodaj również _Imports.razor plik do katalogu głównego wygenerowanego projektu z następującą zawartością, aby włączyć Razor Tworzenie składników:If the -s|--support-pages-and-views switch is used when generating the RCL from the template, then also add an _Imports.razor file to root of the generated project with the following contents to enable Razor component authoring:
```
@using Microsoft.AspNetCore.Components.Web
```
Ręcznie Dodaj plik do katalogu głównego wygenerowanego projektu.Manually add the file the root of the generated project.
Aby dodać bibliotekę do istniejącego projektu, użyj dotnet add reference polecenia w powłoce poleceń.To add the library to an existing project, use the dotnet add reference command in a command shell. W poniższym przykładzie RCL jest dodawany do aplikacji.In the following example, the RCL is added to the app. Wykonaj następujące polecenie z folderu projektu aplikacji z ścieżką do biblioteki:Execute the following command from the app's project folder with the path to the library:
```
dotnet add reference {PATH TO LIBRARY}
```

Korzystanie ze składnika bibliotekiConsume a library component

Aby można było korzystać ze składników zdefiniowanych w bibliotece w innym projekcie, należy użyć jednej z następujących metod:In order to consume components defined in a library in another project, use either of the following approaches:

Użyj pełnej nazwy typu z przestrzeni nazw.Use the full type name with the namespace.
Zastosuj Razor @using dyrektywę.Use Razor's @using directive. Poszczególne składniki można dodawać według nazwy.Individual components can be added by name.

W poniższych przykładach ComponentLibrary jest biblioteka składników zawierająca Component1 składnik ( Component1.razor ).In the following examples, ComponentLibrary is a component library containing the Component1 component (Component1.razor). Component1Składnik jest przykładowym składnikiem automatycznie dodawanym przez szablon projektu RCL podczas tworzenia biblioteki.The Component1 component is an example component automatically added by the RCL project template when the library is created.

Odwołuje się do Component1 składnika przy użyciu jego przestrzeni nazw:Reference the Component1 component using its namespace:

<h1>Hello, world!</h1>

Welcome to your new app.

<ComponentLibrary.Component1 />

Alternatywnie można przenieść bibliotekę do zakresu za pomocą @using dyrektywy i użyć składnika bez jego przestrzeni nazw:Alternatively, bring the library into scope with an @using directive and use the component without its namespace:

@using ComponentLibrary

<h1>Hello, world!</h1>

Welcome to your new app.

<Component1 />

Opcjonalnie należy uwzględnić @using ComponentLibrary dyrektywę w pliku najwyższego poziomu, _Import.razor Aby udostępnić składniki biblioteki dla całego projektu.Optionally, include the @using ComponentLibrary directive in the top-level _Import.razor file to make the library's components available to an entire project. Dodaj dyrektywę do pliku na _Import.razor dowolnym poziomie, aby zastosować przestrzeń nazw do pojedynczego składnika lub zestawu składników w folderze.Add the directive to an _Import.razor file at any level to apply the namespace to a single component or set of components within a folder.

W przypadku składników biblioteki, które korzystają z izolacji CSS, nie istnieje potrzeba jawnego łączenia stylów poszczególnych składników biblioteki w aplikacji, która korzysta z biblioteki.For library components that use CSS isolation, there's no need to explicitly link the library's individual component stylesheets in the app that consumes the library. Style składników są automatycznie udostępniane aplikacji zużywanej.The component styles are automatically made available to the consuming app.

Aby zapewnić dodatkowe style składników biblioteki z arkuszy stylów w wwwroot folderze biblioteki, Połącz arkusze stylów w wwwroot/index.html pliku aplikacji ( Blazor WebAssembly ) lub Pages/_Host.cshtml pliku ( Blazor Server ).To provide additional library component styles from stylesheets in the library's wwwroot folder, link the stylesheets in the consuming app's wwwroot/index.html file (Blazor WebAssembly) or Pages/_Host.cshtml file (Blazor Server):

<head>
    ...
    <link href="_content/ComponentLibrary/additionalStyles.css" rel="stylesheet" />
</head>

Aby podać Component1 my-component klasę CSS, Połącz się z arkuszem stylów biblioteki w wwwroot/index.html pliku ( Blazor WebAssembly ) lub Pages/_Host.cshtml pliku () aplikacji ( Blazor Server ):To provide Component1's my-component CSS class, link to the library's stylesheet in the app's wwwroot/index.html file (Blazor WebAssembly) or Pages/_Host.cshtml file (Blazor Server):

<head>
    ...
    <link href="_content/ComponentLibrary/styles.css" rel="stylesheet" />
</head>

Tworzenie Razor biblioteki klas składników ze statycznymi zasobamiCreate a Razor components class library with static assets

RCL może zawierać statyczne zasoby.An RCL can include static assets. Zasoby statyczne są dostępne dla każdej aplikacji, która korzysta z biblioteki.The static assets are available to any app that consumes the library. Aby uzyskać więcej informacji, zobacz Interfejs użytkownika wielokrotnego użytku Razor w bibliotekach klas z ASP.NET Core.For more information, see Interfejs użytkownika wielokrotnego użytku Razor w bibliotekach klas z ASP.NET Core.

Dostarczaj składniki i zasoby statyczne do wielu Blazor aplikacji hostowanychSupply components and static assets to multiple hosted Blazor apps

Aby uzyskać więcej informacji, zobacz Hostowanie i wdrażanie ASP.NET Core Blazor WebAssembly.For more information, see Hostowanie i wdrażanie ASP.NET Core Blazor WebAssembly.

Analizator zgodności przeglądarki dla programu Blazor WebAssemblyBrowser compatibility analyzer for Blazor WebAssembly

Blazor WebAssembly aplikacje są przeznaczone dla całego obszaru powierzchni interfejsu API platformy .NET, ale nie wszystkie interfejsy API platformy .NET są obsługiwane w zestawie webassembly z powodu ograniczeń piaskownicy przeglądarki.Blazor WebAssembly apps target the full .NET API surface area, but not all .NET APIs are supported on WebAssembly due to browser sandbox constraints. Nieobsługiwane interfejsy API są zgłaszane PlatformNotSupportedException podczas uruchamiania w zestawie webassembly.Unsupported APIs throw PlatformNotSupportedException when running on WebAssembly. Analizator zgodności platformy ostrzega dewelopera, gdy aplikacja korzysta z interfejsów API, które nie są obsługiwane przez Platformy docelowe aplikacji.A platform compatibility analyzer warns the developer when the app uses APIs that aren't supported by the app's target platforms. W przypadku Blazor WebAssembly aplikacji oznacza to sprawdzenie, czy interfejsy API są obsługiwane w przeglądarkach.For Blazor WebAssembly apps, this means checking that APIs are supported in browsers. Dodawanie adnotacji do interfejsów API programu .NET Framework dla analizatora zgodności jest procesem trwającym, więc nie wszystkie interfejsy API programu .NET Framework są obecnie opatrzone adnotacją.Annotating .NET framework APIs for the compatibility analyzer is an on-going process, so not all .NET framework API is currently annotated.

Blazor WebAssembly i Razor projekty biblioteki klas automatycznie włączają testy compatibilty przeglądarki przez dodanie browser jako obsługiwanej platformy z SupportedPlatform elementem MSBuild.Blazor WebAssembly and Razor class library projects automatically enable browser compatibilty checks by adding browser as a supported platform with the SupportedPlatform MSBuild item. Deweloperzy biblioteki mogą ręcznie dodać SupportedPlatform element do pliku projektu biblioteki, aby włączyć tę funkcję:Library developers can manually add the SupportedPlatform item to a library's project file to enable the feature:

<ItemGroup>
  <SupportedPlatform Include="browser" />
</ItemGroup>

Podczas tworzenia biblioteki należy wskazać, że konkretny interfejs API nie jest obsługiwany w przeglądarkach, określając browser UnsupportedOSPlatformAttribute :When authoring a library, indicate that a particular API isn't supported in browsers by specifying browser to UnsupportedOSPlatformAttribute:

[UnsupportedOSPlatform("browser")]
private static string GetLoggingDirectory()
{
    ...
}

Aby uzyskać więcej informacji, zobacz Dodawanie adnotacji do interfejsów API jako nieobsługiwanych na określonych platformach (repozytorium dotnet/Designing w witrynie GitHub.For more information, see Annotating APIs as unsupported on specific platforms (dotnet/designs GitHub repository.

Blazor Izolacja kodu JavaScript i odwołania do obiektówBlazor JavaScript isolation and object references

Blazor Włącza izolację JavaScript w standardowych modułach języka JavaScript.Blazor enables JavaScript isolation in standard JavaScript modules. Izolacja JavaScript zapewnia następujące korzyści:JavaScript isolation provides the following benefits:

Zaimportowana wartość JavaScript nie jest już zanieczyszczana globalną przestrzenią nazw.Imported JavaScript no longer pollutes the global namespace.
Odbiorcy biblioteki i składników nie są zobowiązani do ręcznego zaimportowania powiązanego języka JavaScript.Consumers of the library and components aren't required to manually import the related JavaScript.

Aby uzyskać więcej informacji, zobacz Wywoływanie funkcji języka JavaScript z metod .NET w ASP.NET Core Blazor.For more information, see Wywoływanie funkcji języka JavaScript z metod .NET w ASP.NET Core Blazor.

Kompilowanie, pakowanie i dostarczanie do narzędzia NuGetBuild, pack, and ship to NuGet

Ponieważ biblioteki składników są standardowymi bibliotekami .NET, pakowanie i dostarczanie ich do narzędzia NuGet nie różni się od pakowania i wysyłania żadnej biblioteki do narzędzia NuGet.Because component libraries are standard .NET libraries, packaging and shipping them to NuGet is no different from packaging and shipping any library to NuGet. Pakowanie jest wykonywane przy użyciu dotnet pack polecenia w powłoce poleceń:Packaging is performed using the dotnet pack command in a command shell:

dotnet pack

Przekaż pakiet do narzędzia NuGet przy użyciu dotnet nuget push polecenia w powłoce poleceń.Upload the package to NuGet using the dotnet nuget push command in a command shell.