daohualiuxiang
/
AspNetCore.Docs
mirror of https://github.com/dotnet/AspNetCore.Docs.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Importing components with @using directives (#11985)

pull/12017/head
Luke Latham 2019-04-17 11:18:21 -05:00 committed by GitHub
parent 0c6ed817b1
commit 06e3ba3cba
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 36 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
aspnetcore/blazor/components.md
View File

@ -5,7 +5,7 @@ description: Learn how to create and use Razor Components, including how to bind
monikerRange: '>= aspnetcore-3.0'
ms.author: riande
ms.custom: mvc
ms.date: 04/15/2019
ms.date: 04/17/2019
uid: blazor/components
---
# Create and use Razor Components
@ -521,6 +521,40 @@ The [sample app](https://github.com/aspnet/Docs/tree/master/aspnetcore/blazor/co
The base class should derive from `ComponentBase`.
## Import components
The namespace of a component authored with Razor is based on:
* The project's `RootNamespace`.
* The path from the project root to the component. For example, `ComponentsSample/Pages/Index.razor` is in the namespace `ComponentsSample.Pages`. Components follow C# name binding rules. In the case of *Index.razor*, all components in the same folder, *Pages*, and the parent folder, *ComponentsSample*, are in scope.
Components defined in a different namespace can be brought into scope using Razor's [\@using](xref:mvc/views/razor#using) directive.
If another component, `NavMenu.razor`, exists in the folder `ComponentsSample/Shared/`, the component can be used in `Index.razor` with the following `@using` statement:
```cshtml
@using ComponentsSample.Shared
This is the Index page.
<NavMenu></NavMenu>
```
Components can also be referenced using their fully qualified names, which removes the need for the [\@using](xref:mvc/views/razor#using) directive:
```cshtml
This is the Index page.
<ComponentsSample.Shared.NavMenu></ComponentsSample.Shared.NavMenu>
```
> [!NOTE]
> The `global::` qualification isn't supported.
>
> Importing components with aliased `using` statements (for example, `@using Foo = Bar`) isn't supported.
>
> Partially qualified names aren't supported. For example, adding `@using ComponentsSample` and referencing `NavMenu.razor` with `<Shared.NavMenu></Shared.NavMenu>` isn't supported.
## Razor support
**Razor directives**
@ -535,8 +569,7 @@ Razor directives are shown in the following table.
| [\@inject](xref:mvc/views/razor#section-4) | Enables service injection from the [service container](xref:fundamentals/dependency-injection). For more information, see [Dependency injection into views](xref:mvc/views/dependency-injection). |
| `@layout` | Specifies a layout component. Layout components are used to avoid code duplication and inconsistency. |
| [\@page](xref:razor-pages/index#razor-pages) | Specifies that the component should handle requests directly. The `@page` directive can be specified with a route and optional parameters. Unlike Razor Pages, the `@page` directive doesn't need to be the first directive at the top of the file. For more information, see [Routing](xref:blazor/routing). |
| [\@using](xref:mvc/views/razor#using) | Adds the C# `using` directive to the generated component class. |
| [\@addTagHelper](xref:mvc/views/razor#tag-helpers) | Use `@addTagHelper` to use a component in a different assembly than the app's assembly. |
| [\@using](xref:mvc/views/razor#using) | Adds the C# `using` directive to the generated component class. This also brings all the components defined in that namespace into scope. |
**Conditional attributes**