current position:Home>Properties to be known in angular @ component

Properties to be known in angular @ component

2022-05-15 02:13:08Maple moving forward

encapsulation: Component style encapsulation Strategy

@Component({
  selector: 'app-xxx',
  templateUrl: 'XXX',
  styleUrls: ['XXX'],
  encapsulation:ViewEncapsulation.Emulated  // If it is not written, the default value is 
})

encapsulation Provide three values :

ViewEncapsulation.Native: stay angular10.0 Has been removed from .

ViewEncapsulation.Emulated: The default value is , Indicates that the component style only works on the component itself , Does not affect the global style , stay head Generate a separate style label . ( Usually this is what we want most )

ViewEncapsulation.None: Indicates that the component style acts on the global , Will affect the global style , stay head Generate a separate style label .( If you want to act on the whole , I think we can go directly to style.less Write in , There is no need to write a global style in a component )

ViewEncapsulation.ShadowDom: Use Shadow DOM Encapsulation style , And create a... For the host element of the component ShadowRoot.( Have time to see shadowDom)

interpolation:   Override the default interpolation Expression start stop delimiter ({ { and }})

@Component({
  selector: 'app-xxx',
  templateUrl: 'XXX',
  styleUrls: ['XXX'],
  interpolation:['~~', '~~'],
})

export class IndexComponent implements OnInit {
    chooseSortIndex = 0;
}

After the change, the interpolation expression becomes like this

<div>~~chooseSortIndex~~</div>  // It's good to change it to what you like 

preserveWhitespaces: The default is false, Unless you rewrite it through compiler options . by true The retention , by false Remove the possibly redundant white space characters from the compiled template . White space characters are those that can be in JavaScript Match in regular expression \s The characters of .

animations: One or more animations trigger() call , That is to call angular animation Animation .

exportAs:   Define a name , be used for In the template Put the instruction assignment Give a variable . That is to define an alias for the instruction , You can then assign a value to the template variable... In the template that uses the instruction , In this way, some methods of the instruction can be called through the template variable .

Customize appInfiniteScroll Instructions

import {Directive,ElementRef,Input,Output,EventEmitter,} from '@angular/core';
@Directive({
  selector: '[appInfiniteScroll]',
  outputs: ['pageChange'],
  exportAs:'iiii'
})
export class InfiniteScrollDirective {

  ngOnInit() {

  }

  aa(){
    alert('112')
  }

}

A component html Use in (exportAs Make custom instructions more flexible )

<div appInfiniteScroll #aac="iiii" (click)="aac.aa()"> Ha ha ha </div>

In addition ...

copyright notice
author[Maple moving forward],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/132/202205120524480544.html

Random recommended