Shulou(Shulou.com)06/02 Report--

This article mainly introduces the class decorator in Angular, which has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, let the editor take you to understand it.

There are five types of decorators in angular, indicating the purpose of each class and how angular parses it.

NgModule: marked as a module

Component: marked as a component

Directive: indicates that it is an instruction

Injectable: marked as a service

Pipe: marked as a pipe

1. NgModule

Mark a class as a module, and you can configure the data used in the module in this class. [recommended for related tutorials: "angular tutorial"]

It supports the following configuration: (same as below)

1.1 imports

Import the modules that need to be used in this module, and note that lazy modules cannot be imported, otherwise lazy loading will have no effect.

1.2. Declarations: Array

Declarative components, instructions, and pipes are collectively referred to as declarable objects.

1.3. Providers: []

Registration service

1.4 exports: Array

Other modules need to be thrown out if they want to use the components, instructions, or pipes of this module.

Why did you throw it out? Angular states that you can declare that objects should and can only belong to one NgModule.

1.5 entryComponents: []

Tell Angular which components are dynamic, and Angular creates a ComponentFactory for it and saves it to ComponentFactoryResolver.

To write a dynamic component, you need not only to add it here, but also to declare it in declarations.

1.6 bootstrap:Array

The component that needs to be booted when the module boots. All the components listed here are automatically added to the entryComponents. That is, the component that is displayed by default when the route is linked to the module.

1.7 schemas: Array

The schema (HTML schema) of the declaration elements allowed in this NgModule. Elements and attributes, whether Angular components or directives, must be declared in schema.

1.8 id: string

The name or unique identifier of the current NgModule in the getModuleFactory. If undefined, the module will not be registered with getModuleFactory.

1.9 jit: true

If true, the module is ignored by the AOT compiler, so it is always compiled using JIT.

2. Component

A decorator that marks a class as an Angular component and configures it with metadata to determine how the component should be processed, instantiated, and used at run time. A component is a special instruction whose properties are inherited from the Directive decorator.

2.1 selector: string

Css selector names, which can be tag signatures, attributes, class, etc., are generally named after tags, as described in the instruction selector section.

For example, selector: 'mo-dir' is used in html as

You can also define it using attributes, such as selector:'[mo-dir]'in html

2.2 template: string 、 templateUrl:string

You can only use one of these two at the same time.

Template is a html string written directly, for example, I am html content.

TemplateUrl is the path address of the html file

2.3 styles 、 styleUrls

Styles is written directly in css style.

StyleUrls is the path address of the css file

2.4 animations

One or more animated trigger () calls containing some state () and transition () definitions.

2.5 providers

The service can be registered here and can be used.

2.6 changeDetection

Specifies the change detection policy for the current component.

2.7 inputs: string []

Component, which is equivalent to @ Input. Unlike @ Input, it is an array.

@ Component ({selector: 'mo-dir', inputs: [id: 123], template: `{{id}}`}) class BankAccount {id: number;}

The content in inputs indicates that there is an id attribute, with a default value of 123. Equivalent to @ Input id: number = 123.

2.8 outputs:string []

The event output, which is equivalent to @ Output, is an array unlike @ Output.

@ Component ({selector: 'mo-dir', outputs: [' idChange']}) class ChildDir {idChange: EventEmitter = new EventEmitter ();}

Equivalent to @ output idChange: EventEmitter = new EventEmitter ();.

3. Directive3.1 selector: string

It is a css selector that marks the instruction in the template and triggers the instantiation of the instruction. You can use one of the following forms

Element name or label signature

@ Directive ({selector: 'mo',})

Class

@ Directive ({selector: '.mo',})

Attribute name

@ Directive ({selector:'[mo]',})

Attribute name = attribute value

@ Directive ({selector:'[type=text]',})

Does not contain a selector

For example, matching has the attribute mo but does not contain class.foo

@ Directive ({selector: 'div [mo]: not (.foo)',})

The first instruction will not be matched and the second will be matched.

Just match one of the many

You can write more than one at the same time, and if you match one of them, separate them with commas.

@ Directive ({selector: '.foo, .bar',})

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.