Background and complaints:
I had the opportunity to come into contact with the framework of angualr again this year. I remembered that when I first came into contact with ng1 in 2016, I was still ng1, and then I was very hard to learn and the learning curve was particularly steep. This year, a project reconstruction directly adopted angular6, and I was responsible for the development and maintenance of the project. Then I learned ng6 again. I thought that with the foundation of ng1, I would learn better. However, the learning curve was particularly steep, but I finally chewed ng6 (I was reluctant to learn it, but I couldn't do it). Back to the project, the project did not introduce other component libraries, so many basic components were developed by themselves (it was so sour and exciting to develop with ng). The table component made me think about it for about two weeks, and finally developed it. After the complaints, I will introduce my approach. My approach may not be the most correct.
form:
Mainly refer to the format of the table group in the element:
vue:
<el-table :data="tableData">
<el-table-column prop="date" label="date"></el-table-column>
<el-table-column label="operate">
<template slot-scope="scope">
<el-button @click="handleClick()" type="text" size="small">Check</el-button>
</template>
</el-table-column>
</el-table>
So I got the format of the table component of angualr:
<app-widget-table [data]="tableData">
<app-widget-table-column prop="date" label="date"></app-widget-table-column>
<app-widget-table-column label="operate">
<ng-template #scope let-row="scope">
<ng-widget-button (click)="handleClick(row)" type="text" size="small">Check</el-button>
</ng-template>
</app-widget-table-column>
</app-widget-table>
In angular table components, the most difficult is how ng-template binds scope to ng-widget-button components;
Key points knowledge explanation:
ng-content：
All child components contained in the parent component can be inserted into the location where the ng-container is located in the table component, which is very similar to the slot in vue;
ng-container:
It can be used as a component template, which is very similar to the template component in vue;
ng-template：
This thing is the most troublesome thing in the entire component. Using it directly will have no effect. It must be used with TemplateRef and ngTemplateOutlet to have effect. It is mainly used as a template and introduced into scope. For the specific principle, you can check the official documentation (/api）
TemplateRef：
It is mainly used to obtain references to the ng-template component;
ngTemplateOutlet：
Display the content of ng-template on the html page and bind variables, just like router-view in vue;
QueryList：
Get all content guidance in the table component;
ContentChildren：
Content mapping interface, adopts multiple sub-elements
ContentChild：
Content mapping interface, adopts a single child element
First analyze the app-widget-table-column component:
The function of this component is to transport data and introduce content. The component itself has no operation or logic, and is a transporter;
：
<ng-container></ng-container>
：
import {Component, Input, Output, TemplateRef, ContentChild, AfterContentInit} from '@angular/core';
@Component({
selector: 'app-widget-table-column',
templateUrl: './',
styleUrls: ['./'],
preserveWhitespaces: false
})
export class TableColumnComponent implements AfterContentInit {
constructor() {
}
@Input()
label: string;
@Input()
prop: string;
@Input()
class: string;
@Input()
style: object;
@ContentChild('scope') // Get a local variable of the ng-template component and modify the scope object scope: TemplateRef<any>; // Get the guidance for ng-template, mainly its content, any means that it can be any content
ngAfterContentInit(): void {}
}
<div>
<div>
<ng-content></ng-content> // It is mainly used to introduce the content of the entire table component, but no content is displayed on the page </div>
<table class="table">
<thead>
<tr>
<th *ngFor="let label of labelList">{{label}}</th> // Similar to v-for, it mainly talks about all labels collected by table-column and displays </tr>
</thead>
<tbody *ngIf=" > 0">
<ng-container *ngFor="let item of data; let i = index">
<tr>
<ng-container *ngFor="let row of tableColumn['_results']">
<td *ngIf="" [ngStyle]="" [ngClass]="">{{item[]}}</td> // Show directly
<td *ngIf="" [ngStyle]="" [ngClass]="">
<ng-container *ngTemplateOutlet="; context: {$implicit: {}, scope: data[i]}">
</ng-container> // Show the content of ng-template </td>
</ng-container>
</tr>
</ng-container>
</tbody>
</table>
<div *ngIf=" === 0" class="none-data">No data yet!</div>
</div>
:
import {Component, OnInit, Input, Output, ContentChildren, AfterContentInit, ViewChild, AfterViewInit, QueryList} from '@angular/core';
import {TableColumnComponent} from '../table-column/';
@Component({
selector: 'app-widget-table',
templateUrl: './',
styleUrls: ['./'],
preserveWhitespaces: false
})
export class TableComponent implements OnInit, AfterContentInit {
constructor() {
}
@ContentChildren(TableColumnComponent)
tableColumn: QueryList<TableColumnComponent>; // Get all instances of the table-column component
@Input()
data: object[];
labelList: string[] = [];
ngOnInit(): void {
if (!( instanceof Array)) {
throw new Error('the data into TableComonent must be Array!');
}
}
ngAfterContentInit(): void {
= ['_results'].map(item => );
}
}
Although it seems that there is not much code for these two components, the logic inside is quite confusing, which proves that ng is very difficult to use. However, it is really commendable that ng uses ts and rx, and it is really good to use it.
These two components are still relatively rough at present, and there are not many functions and features. They can only meet the needs of general tables. In the future, we will continue to improve this component and the basic components developed in other projects, hoping to accumulate a set of component libraries.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.