A brief analysis of component templates in angular

This article will take you through the component templates in angular and briefly introduce the relevant knowledge points: data binding, property binding, event binding, two-way data binding, content projection, etc. ,I hope to be helpful!

Angular is a client## built using HTML, CSS, TypeScript #A framework for building single-page applications. [Related tutorial recommendations: "angular tutorial"]

Angular is a

heavyweight framework that integrates a large number ofout-of-the-box function module.

Angular is designed for large-scale application development and provides a clean and loosely coupled code organization method, making the application tidy and easier to maintain.

angualr Documentation:

• Angular: https://angular.io/

• Angular Chinese: https:// angular.cn/

• Angular CLI: https://cli.angular.io/

Angular CLI Chinese: https://angular.cn/ cli

Component template

1. Data binding

Data binding That is, the data in the component class is displayed in the component template. When the data in the component class changes, it will automatically be synchronized to the component template (data-driven DOM).

Use

interpolation expression for data binding in Angular, that is, {{ }}<!-- -->.

<h2>{{message}}</h2>
<h2>{{getInfo()}}</h2>
<h2>{{a == b ? &#39;相等&#39;: &#39;不等&#39;}}</h2>
<h2>{{&#39;Hello Angular&#39;}}</h2>
<p [innerHTML]="htmlSnippet"></p> <!-- 对数据中的代码进行转义 -->

2. Attribute binding

2.1 Common attributes

Attribute binding is divided into In two cases,

binds DOM object attributes and binds HTML tag attributes.

• Use

  [property name] to bind DOM object properties to elements.

  <img [src]="imgUrl"/>

• Use

  [attr.attribute name]Bind HTML tag attributes to elements

  <td [attr.colspan]="colSpan"></td>

In most cases Below, DOM object attributes and HTML tag attributes are corresponding, so the first case is used.

But some attributes

only exist in HTML tags and do not exist in the DOM object. In this case, you need to use the second case, such as the colspan attribute, in the DOM object Just not.

Or custom HTML attributes also need to use the second case.

2.2 class attribute

<button class="btn btn-primary" [class.active]="isActive">按钮</button>
<div [ngClass]="{&#39;active&#39;: true, &#39;error&#39;: true}"></div>

2.3 style attribute

<button [style.backgroundColor]="isActive ? &#39;blue&#39;: &#39;red&#39;">按钮</button>
<button [ngStyle]="{&#39;backgroundColor&#39;: &#39;red&#39;}">按钮</button>

3. Event binding

<button (click)="onSave($event)">按钮</button>
<!-- 当按下回车键抬起的时候执行函数 -->
<input type="text" (keyup.enter)="onKeyUp()"/>

export class AppComponent {
  title = "test"
  onSave(event: Event) {
    // this 指向组件类的实例对象
    this.title // "test"
  }
}

4. Get the native DOM object

4.1 Get## in the component template #

3b39778b4d3d5bec9ef88483dd2ffc49

4.2 Get

Use

ViewChild

decorator to get an element in the component class<pre class="brush:php;toolbar:false">d9e1532bd77523d7523e227ff359de85home works!94b3e26ee717c64999d7867364b1b4a3</pre><pre class="brush:js;toolbar:false;">import { AfterViewInit, ElementRef, ViewChild } from &quot;@angular/core&quot; export class HomeComponent implements AfterViewInit { @ViewChild(&quot;paragraph&quot;) paragraph: ElementRef&lt;HTMLParagraphElement&gt; | undefined ngAfterViewInit() { console.log(this.paragraph?.nativeElement) } }</pre>Use

ViewChildren

Get a set of elements <pre class="brush:html;toolbar:false;">&lt;ul&gt; &lt;li #items&gt;a&lt;/li&gt; &lt;li #items&gt;b&lt;/li&gt; &lt;li #items&gt;c&lt;/li&gt; &lt;/ul&gt;</pre><pre class="brush:js;toolbar:false;">import { AfterViewInit, QueryList, ViewChildren } from &quot;@angular/core&quot; @Component({ selector: &quot;app-home&quot;, templateUrl: &quot;./home.component.html&quot;, styles: [] }) export class HomeComponent implements AfterViewInit { @ViewChildren(&quot;items&quot;) items: QueryList&lt;HTMLLIElement&gt; | undefined ngAfterViewInit() { console.log(this.items?.toArray()) } }</pre>

5. Two-way data bindingData is synchronized in both directions in the component class and component template.

Angular places the two-way data binding function in the

@angular/forms

module, so to implement two-way data binding you need to rely on this module. <pre class="brush:js;toolbar:false;">import { FormsModule } from &quot;@angular/forms&quot; @NgModule({ imports: [FormsModule], }) export class AppModule {}</pre><pre class="brush:html;toolbar:false;">&lt;input type=&quot;text&quot; [(ngModel)]=&quot;username&quot; /&gt; &lt;button (click)=&quot;change()&quot;&gt;在组件类中更改 username&lt;/button&gt; &lt;div&gt;username: {{ username }}&lt;/div&gt;</pre><pre class="brush:js;toolbar:false;">export class AppComponent { username: string = &quot;&quot; change() { this.username = &quot;hello Angular&quot; } }</pre>

6. Content projection

<!-- app.component.html -->
<bootstrap-panel>
	<div class="heading test">
        Heading
  </div>
  <div class="body">
        Body
  </div>
</bootstrap-panel>

<!-- panel.component.html -->
<div class="panel panel-default">
  <div class="panel-heading">
    <ng-content select=".heading"></ng-content>
  </div>
  <div class="panel-body">
    <ng-content select=".body"></ng-content>
  </div>
</div>

If there is only one ng-content, the select attribute is not required.

ng-content will be replaced by

290914cdcad83023eae6a5478da7e0ba16b28748ea4df4d9c2150843fecfba68

in the browser. If you don't want this extra div, you can use ng -container replaces this div.

ng-content is usually used in projection: when the parent component needs to project data to the child component, it must specify where to project the data to the child component. At this time, you can use the ng-content tag. Making a placeholder will not produce a real DOM element, but will only copy the projected content.

• ng-container is a special container tag that does not generate real dom elements, so adding attributes to the ng-container tag is invalid.

• <!-- app.component.html -->
  <bootstrap-panel>
  	<ng-container class="heading">
          Heading
      </ng-container>
      <ng-container class="body">
          Body
      </ng-container>
  </bootstrap-panel>

7. Data binding fault tolerance processing

// app.component.ts
export class AppComponent {
    task = {
        person: {
            name: '张三'
        }
    }
}

<!-- 方式一 -->
<span *ngIf="task.person">{{ task.person.name }}</span>
<!-- 方式二 -->
<span>{{ task.person?.name }}</span>

8. Global style

/* 第一种方式 在 styles.css 文件中 */
@import "~bootstrap/dist/css/bootstrap.css";
/* ~ 相对node_modules文件夹 */

<!-- 第二种方式 在 index.html 文件中  -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet" />

// 第三种方式 在 angular.json 文件中
"styles": [
  "./node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
]

For more programming related knowledge, please visit:

Programming Video

! !

The above is the detailed content of A brief analysis of component templates in angular. For more information, please follow other related articles on the PHP Chinese website!