5 lines
6.0 KiB
JSON
5 lines
6.0 KiB
JSON
|
{
|
||
|
|
"id": "guide/sharing-ngmodules",
|
||
|
|
"title": "Sharing modules",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/sharing-ngmodules.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n <h1 id=\"sharing-modules\">Sharing modules<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/sharing-ngmodules#sharing-modules\"><i class=\"material-icons\">link</i></a></h1>\n<p>Creating shared modules allows you to organize and streamline your code. You can put commonly\nused directives, pipes, and components into one module and then import just that module wherever\nyou need it in other parts of your app.</p>\n<p>Consider the following module from an imaginary app:</p>\n<code-example language=\"typescript\">\nimport { <a href=\"api/common/CommonModule\" class=\"code-anchor\">CommonModule</a> } from '@angular/common';\nimport { <a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a> } from '@angular/core';\nimport { <a href=\"api/forms/FormsModule\" class=\"code-anchor\">FormsModule</a> } from '@angular/forms';\nimport { CustomerComponent } from './customer.component';\nimport { NewItemDirective } from './new-item.directive';\nimport { OrdersPipe } from './orders.pipe';\n\n@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>({\n imports: [ <a href=\"api/common/CommonModule\" class=\"code-anchor\">CommonModule</a> ],\n declarations: [ CustomerComponent, NewItemDirective, OrdersPipe ],\n exports: [ CustomerComponent, NewItemDirective, OrdersPipe,\n <a href=\"api/common/CommonModule\" class=\"code-anchor\">CommonModule</a>, <a href=\"api/forms/FormsModule\" class=\"code-anchor\">FormsModule</a> ]\n})\nexport class SharedModule { }\n</code-example>\n<p>Note the following:</p>\n<ul>\n<li>It imports the <code><a href=\"api/common/CommonModule\" class=\"code-anchor\">CommonModule</a></code> because the module's component needs common directives.</li>\n<li>It declares and exports the utility pipe, directive, and component classes.</li>\n<li>It re-exports the <code><a href=\"api/common/CommonModule\" class=\"code-anchor\">CommonModule</a></code> and <code><a href=\"api/forms/FormsModule\" class=\"code-anchor\">FormsModule</a></code>.</li>\n</ul>\n<p>By re-exporting <code><a href=\"api/common/CommonModule\" class=\"code-anchor\">CommonModule</a></code> and <code><a href=\"api/forms/FormsModule\" class=\"code-anchor\">FormsModule</a></code>, any other module that imports this\n<code>SharedModule</code>, gets access to directives like <code><a href=\"api/common/NgIf\" class=\"code-anchor\">NgIf</a></code> and <code>NgFor</code> from <code><a href=\"api/common/CommonModule\" class=\"code-anchor\">CommonModule</a></code>\nand can bind to component properties with <code>[(<a href=\"api/forms/NgModel\" class=\"code-anchor\">ngModel</a>)]</code>, a directive in the <code><a href=\"api/forms/FormsModule\" class=\"code-anchor\">FormsModule</a></code>.</p>\n<p>Even though the components declared by <code>SharedModule</code> might not bind\nwith <code>[(<a href=\"api/forms/NgModel\" class=\"code-anchor\">ngModel</a>)]</code> and there may be no need for <code>SharedModule</code>\nto import <code><a href=\"api/forms/FormsModule\" class=\"code-anchor\">FormsModule</a></code>, <code>SharedModule</code> can still export\n<code><a href=\"api/forms/FormsModule\" class=\"code-anchor\">FormsModule</a></code> without listing it among its <code>imports</code>. This\nway, you can give other modules access to <code><a href=\"api/forms/FormsModule\" class=\"code-anchor\">FormsModule</a></code> without\nhaving to import it directly into the <code>@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code> decorator.</p>\n<h3 id=\"using-components-vs-services-from-other-modules\">Using components vs services from other modules<a title=\"Link to this heading\" class=\"header-link\" aria-hidden
|
||
|
|
}
|