A brief discussion on the basic knowledge of components (@Component) in Angular

This article will introduce to you the basic knowledge of components (@Component) in Angular. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Environment:

• Angular CLI: 11.0.6
• Angular: 11.0.7
• Node: 12.18.3
• npm : 6.14.6
• IDE: Visual Studio Code

1. Overview

Components are the main building blocks of Angular applications. Each component includes the following parts:

• An HTML template used to declare the content to be rendered on the page
• A Typescript class used to define behavior
• A CSS Selector, used to define how the component is used in the template
• (Optional) CSS style to be applied to the template

Component can be a page or a Component (control). Always, is a page element. [Related tutorial recommendations: "angular tutorial"]

Any Component is part of NgModule, so that it can be called by other applications and other Components. In order to define a Component as a member of NgModule, developers should list the Component they developed in the declarations attribute of NgModule.

In addition, developers can configure metadata through the Component modifier (that is, @Component), so that Components can control their running environment through various Life-Cycle hooks.

2. Create Component

Based on AngularCLI, Component can be easily created. In the directory where you want to create the Component, execute the following command

ng generate component <component-name></component-name>

e.g. ng generate component MyComponent
AngularCLI will automatically generate a folder and 4 files:

• A folder named after the component (e.g my-component)
• A component file .component.ts (e.g my-component.component.ts)
• A template file .component.html (e.g my-component.component.html)
• A CSS file, .component.css (e.g my-component.component.css)
• Test file .component.spec.ts (e.g my-component.component.spec.ts)

For Component, all file names will automatically add the Component suffix, so it is not recommended to include the word 'component' in .

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

The above is the core ts file, which specifies the selector (CSS selector), template (html) file, and css file. HTML/css files can be shared by multiple components if necessary. Especially for css, you can see that the parameter is Array, so multiple css can be formulated.

2.1. Component template

Component template, that is, the HTML part, can be an html file or an html description , are equivalent. Angular components require a template defined with template or templateUrl. But you can't have both statements in a component at the same time.

1. html file method

@Component({
  selector: 'app-component-overview',
  templateUrl: './component-overview.component.html',
})

2. html code method

@Component({
  selector: 'app-component-overview',
  template: '<h1 id="Hello-World">Hello World!</h1>',
})

3. View encapsulation mode

In Angular, the CSS style of a component is encapsulated into its own view without affecting other parts of the application. This part can also be controlled through configuration.

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./my-component.component.css']
})

You can see that a encapsulation attribute (view encapsulation mode) has been added. You can control the encapsulation mode of each component individually by setting the view encapsulation mode on the component's metadata. The optional encapsulation modes are as follows:

1. Emulated mode (default value) simulates the behavior of Shadow DOM by preprocessing (and renaming) CSS code to limit CSS styles to components purpose in view. For more information, see Appendix 1. (Note: Only in, not out, global styles can come in, but component styles cannot go out)
2. ShadowDom mode uses the browser's native Shadow DOM implementation to attach a Shadow DOM to the host element of the component. The component's view is attached to this Shadow DOM, and the component's styles are also included in this Shadow DOM. (Explanation: No entry or exit, no styles can come in, and component styles cannot go out.)
3. None means Angular does not use view encapsulation. Angular adds CSS to global styles. The scoping rules, isolation and protection discussed earlier will not apply. Essentially, this is the same as putting the component's styles directly into HTML.

3.1. Special selector: host

Use: host pseudo-class selector to select the component host element element (relative to the element inside the component template). The :host option is the only way to target a host element. Otherwise, you won't be able to specify it, since the host is not part of the component's own template, but part of the parent component's template.

e.g.

:host {
}

3.2. inline-styles

默认AngularCLI生成的component，css在一个单独文件中。当然，同html模板类似，如果需要，你也可以制定css样式写在ts中， 不单独放到一个文件中。命令：ng generate component MyComponent --inline-style。

生成component如下

@Component({
  selector: 'app-my-component',
  template: &#39;<h1 id="Hello-nbsp-World">Hello World!</h1>&#39;,
  styles: [&#39;h1 { font-weight: normal; }&#39;]
})

4. 总结

• Angular CLI辅助创建一个component所需的多个文件
• 建议html/css/ts分开
• 在期望目录下执行Angular CLI命令，可以生成到制定目录
• ng generate component XXX 可以简写为 ng g c

更多编程相关知识，请访问：编程视频！！

The above is the detailed content of A brief discussion on the basic knowledge of components (@Component) in Angular. For more information, please follow other related articles on the PHP Chinese website!