This is the third day of my participation in the August More text Challenge. For details, see: August More Text Challenge

Preface:

In this article, we’ll take a look at some of the other concepts associated with components that you might encounter when you’re working on an Angular project, and that you might want to clean up after work. I hope you can stick to it. I’m new to Angular, so please correct me.

Body:

The component dynamic effect

Angular’s default animation module uses the Web Animations specification, which requires compatibility concerns. Compatible with the view

  1. By convention, you need to import the corresponding module before using it. In this case, you need to use the animated moduleBrowserAnimationsModule
    1. Module address:@angular/platform-browser/animations
    2. Adding to an NgModule:imports: [ BrowserAnimationsModule ]
  2. Writing animation effects
import {
  trigger,
  style,
  transition,
  animate,
  keyframes,
} from '@angular/animations';
export const flyIn = trigger('flyIn', [
  transition('void => *', [
    animate(
      3000,
      keyframes([
        style({ opacity: 0.transform: 'translateX(-100%)'.offset: 0 }),
        style({ opacity: 1.transform: 'translateX(25px)'.offset: 0.5 }),
        style({ opacity: 1.transform: 'translateX(0)'.offset: 1.0 }),
      ])
    ),
  ]),
  transition('* => void', [
    animate(
      3000,
      keyframes([
        style({ opacity: 1.transform: 'translateX(0)'.offset: 0 }),
        style({ opacity: 1.transform: 'translateX(25px)'.offset: 0.5 }),
        style({ opacity: 0.transform: 'translateX(100%)'.offset: 1}),])),]),]),]);Copy the code
  1. Some of the things that I don’t know about the code are just a little bit of notation, the asterisk in the code means the state is invisible, the void means any state, both of which are built-in
  2. Come into play animation: * => void
  3. Factory animation: void => *
  4. Keyframes: defines the keyframes for our animation
  5. Let’s add the animation we wrote to the component
    1. Put a div and two buttons in our app component to simulate
<div [@flyIn] ="isIn ? '*' : 'void'">Hello World</div>
<button (click) ="in()">In the animation</button>
<button (click) ="out()">Play the animation</button>
Copy the code
  1. Add animation-related properties to the @Component decorator in the app Component:animations: [flyIn]Remember to import the TS file for our flyIn animation.
  2. Add two functions to control the two buttons that are bound separately to our HTML.
import { flyIn } from './flyin';

@Component({...animations: [flyIn],
})
export class AppComponent {
  isIn: boolean = true;

  // Simulate approach
  in() {
    this.isIn = true;
  }

  // Simulate the exit
  out() {
    this.isIn = false; }}Copy the code
  1. Take a look at the demo animation

Dynamic components

The components in the previous two articles are used as tags, which is the most frequently used way, but Angular provides another way to use components that are dynamically composed using TS code

  1. Dynamic components also require us to provide an area in the parent component:<div #container></div>
  2. Let’s see if this looks like the code that created the Ref in React
// See if this code looks like the React Ref
  @ViewChild('container', { read: ViewContainerRef, static: true}) container! : ViewContainerRef;Copy the code
  1. Define the components that we actually need to mount in. The HW component we create temporarily for demonstration
hwComp! : ComponentRef<HelloWorldComponent>;Copy the code
  1. Import the factory used to resolve the component
constructor(private resolver: ComponentFactoryResolver) {}
Copy the code
  1. Parse and mount components
ngAfterContentInit(): void {
  const comp = this.resolver.resolveComponentFactory(HelloWorldComponent);
  // Load the factory parsed components into a predefined container
  this.hwComp = this.container.createComponent(comp);
}
Copy the code
  1. Hwcomp.instance () hwcomp.destroy () hwcomp.destroy () hwComp.destroy(

Encapsulation Mode of a view

View encapsulation Mode

You can control the encapsulation mode of each component individually by changing the encapsulation property of the component decorator

  1. ShadowDom: ShadowDom is implemented using the browser’s native Shadow DOM. This mode is not affected by the global style and does not affect other component styles

  1. Emulated mode (default): simulates ShadowDOM by preprocessing CSS to achieve style isolation. The feature of the mode is to accept the image of global style, but does not affect the styles of other components
  2. None: The style is loaded globally, has no scope, cannot achieve the effect of isolation, prone to unexpected situations.

Conclusion:

That’s the end of this article, and there is one final addition to component-related content. See you in the next article.