Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities

Custom instruction

In NG6, there are three types of instructions

The first type of directive is components (components are also directives)

The second type of instruction: attribute instruction, such as ngStyle, ngClass and so on

Used to control the behavior of elements’ attributes.

NgClass has the same syntax as binding classes in VUE

Attribute values

It could be an array

It could be an object

It could be a string

The third type of directives: structural directives, such as ngIf, ngSwitchCase, ngSwitchDefault, ngFor

A template directive that controls the creation of elements

Attribute directives are distinguished from structural directives

1 Attribute directives control the attribute behavior of elements and are not responsible for their creation, while structural directives control the creation of elements

The default attribute value of the 2 directive is a string, and you need to use syntax sugar if you want to change to js environment

Attribute instruction syntax sugar: []

Structural directive syntax sugar: * for normal elements, [] for template elements

Create instruction

The built-in instructions are limited. To achieve more functions, we need to customize the instructions. Ng6 also provides us with tools to create instructions

By ng g directive name

Command script files and command single test files will be automatically created.

And modify the app.module global module file to be declared globally, so that all components within the module can use this directive directly.

Instructions and Components

The difference between directives and components

1 file

Components have four types of files: styles, templates, scripts, and playtests

Components have only two types of files: scripts and single tests

2 the selector

Components are custom element name selectors

The directive is a custom property name selector

3 the OnInit interface

The component implements the OnInit interface

The directive does not implement the OnInit interface

4 annotations

The Component class of a Component is Component

The annotation class for a Directive is Directive

Components are also directives, and they can communicate with each other and with instructions

Instructions communicate to the component

Because an instruction is used in a component, communication from an instruction to a component can be treated as communication from a child component to a parent component

Is divided into six steps

The first step is to bind custom events

In the second instruction, the Output of the swallow is introduced

In step 3, introduce EventEmitter

The fourth step is to register event objects in two ways

@output () demo = new EventEmitter()

Outputs: [] Deom = new EventEmitter()

The fifth step instructs to publish the message through the EMIT method

Step 6 The parent component receives the data and uses it

For example:

import { Directive, Output, EventEmitter } from '@angular/core'; Outputs @directive ({selector: '[appDemo]', // ['sendMessage']}) export class DemoDirective {// @output () sendMessage = new EventEmitter(); // Initializing sendMessage = new EventEmitter(); Constructor () {// console.log('success') // 2 seconds after sending setTimeout(() => {// 5 publish message this.sendmessage. emit({color: 'pink', MSG: 'pink'})}, 2000)}}Copy the code

Components communicate to instructions

In the same way that a component communicates to an instruction, we can think of it as a parent component communicating to a child component,

Is divided into six steps

The first step is to pass attribute data (use [] syntax sugar if it is variable)

The second step is to define the model class

In the third instruction, introduce the model type

In the fourth instruction, introduce a puffer Input

Step 5 Register data

1 SQL > select * from ‘@input’ WHERE ‘demo’ = ‘Data’;

Inputs: [], Demo :Data; inputs: inputs: []

Use data in step 6 instructions