Home > Article > Web Front-end > 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
Components are the main building blocks of Angular applications. Each component includes the following parts:
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.
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 f3fc15c0228dc320ab4107d8220f2b42
e.g. ng generate component MyComponent
AngularCLI will automatically generate a folder and 4 files:
For Component, all file names will automatically add the Component suffix, so it is not recommended to include the word 'component' in 618b9d141ce13a9de5ed31e4de8e1aae.
@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: '4a249f0d628e2318394fd9b75b4636b1Hello World!473f0a7621bec819994bb5020d29372a', })
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:
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: '<h1>Hello World!</h1>', styles: ['h1 { font-weight: normal; }'] })
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!