Home > Article > Web Front-end > Deep understanding of @Component decorator in angular
Component is a subclass of Directive. It is a decorator used to mark a class as a Angular component. The following article will give you an in-depth understanding of the @Component decorator in angular. I hope it will be helpful to you.
@Component
Decorator1.1 <span style="font-size: 18px;">@Component</span>
Purpose of decorator
When declaring a component, use the @Component decorator on top of the component class. Tells Angular that this is a component. [Related tutorial recommendations: "angular tutorial"]
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-product-alerts', templateUrl: './product-alerts.component.html', styleUrls: ['./product-alerts.component.css'] }) export class ProductAlertsComponent implements OnInit { constructor() { } ngOnInit() { } }
1.2 <span style="font-size: 18px;">@Component</span>
Common options for decorators
@Component
The decorator inherits from Directive
. This css selector is used to mark the directive in the template. and triggers the instantiation of this directive.
1.2.1 Options inherited from @Directive decorator
Options | Type | Description |
---|---|---|
selector | string | css selector name, used in templates Mark the directive (component) in and trigger its instantiation |
inputs | string[] | Angular will automatically update during change detection Enter attributes. The inputs attribute defines a set of configuration items pointing from directiveProperty to bindingProperty: · directiveProperty is used to specify the properties within the directive to which values are to be written. · bindingProperty is used to specify the DOM property from which the value is to be read. When bindingProperty is not provided, it is assumed to be the same as directiveProperty. |
outputs | string[] | A set of output properties for event binding. When an output property emits an event, a handler in the template attached to the event is called. Each output property maps directiveProperty to bindingProperty: · directiveProperty specifies the component property to emit the event. · bindingProperty specifies the HTML property to which the event handler is to be attached. |
provides | Provider[] | A collection of service providers |
exportAs | string | One or more names that can be used to assign this directive to a variable in the template. When there are multiple names, separate them with commas. |
queries | {[key:string]:any} | Configure some queries that will be injected into this directive. The content query is set before calling the ngAfterContentInit callback. The view query will be set before calling the ngAfterViewInit callback. |
jit | true | If true, the directive/component will be ignored by the AOT compiler, so it will always be JIT compiled . This option is to support future Ivy compilers and has no effect yet. |
host | {[key:string]:string} | Use a set of key-value pairs to map class attributes to host elements Bindings (Properties, Attributes, and Events). Angular automatically checks host Property bindings during change detection. If the bound value changes, Angular updates the directive's host element. When key is a Property of the host element, the Property value is propagated to the specified DOM attribute. When the key is a static Attribute in the DOM, the Attribute value will be propagated to the Property specified on the host element. For event processing: · Its key is the DOM event that the directive wants to listen to. To listen to a global event, add the target you want to listen to in front of the event name. The target can be window, document, or body. · Its value is the statement to be executed when the event occurs. If this statement returns false, then the preventDefault function of this DOM event will be called. The local variable $event can be referenced in this statement to obtain event data. |
1.2.2 @Component’s own options
Type | Description | |
---|---|---|
ChangeDetectionStrategy | When the component is instantiated, Angular will create a change detector , which is responsible for propagating changes in each binding value of the component. The strategy is one of the following values: | · ChangeDetectionStrategy#OnPush(0) Sets the strategy to CheckOnce (on demand). · ChangeDetectionStrategy#Default(1) Set the strategy to CheckAlways. |
Provider[] | Define a set of injectable objects that are available in various child nodes of the view | |
string | The ID of the module that contains this component. The component must be able to resolve relative URLs used in templates and stylesheets. SystemJS exports the __moduleName variable in every module. In CommonJS, this can be set to module.id. | |
string | The URL of the component template file. If it is provided, do not use template to provide inline templates. | |
string | The inline template of the component. If it is provided, do not use templateUrl to provide the template. | |
string[] | One or more URLs pointing to the file containing the CSS style sheet of this component. | |
string[] | One or more inline CSS styles used by this component. | |
any[] | One or more animation trigger() calls, containing some state() and transition() definitions. | |
ViewEncapsulation | Style encapsulation strategy used by templates and CSS styles. The values are: | · ViewEncapsulation.ShadowDom: Use Shadow DOM. It only works on platforms that natively support Shadow DOM. · ViewEncapsulation.Emulated: Use shimmed CSS to emulate native behavior. · ViewEncapsulation.None: Use global CSS without any encapsulation. If not provided, the value will be obtained from CompilerOptions. The default compiler option is ViewEncapsulation.Emulated. If the policy is set to ViewEncapsulation.Emulated and the component does not specify styles or styleUrls, it automatically switches to ViewEncapsulation.None. |
[string, string] | Override the default start and end delimiters of interpolation expressions ({ | { and }}) |
Arraya507af25d826c815ed749565a8fa482a | ||
## If #boolean | is true, it is retained, and if it is false, possible extra whitespace characters are removed from the compiled template. Whitespace characters are those characters that match \s in JavaScript regular expressions. Defaults to false unless overridden via compiler options. |
The above is the detailed content of Deep understanding of @Component decorator in angular. For more information, please follow other related articles on the PHP Chinese website!