angular - 在父 ngOnInit 完成之前调用的子组件
angular5 - child component called before parent ngOnInit finish
首先,在ngOnInit()中制作table设置数据并设置到settingA变量。
此设置变量绑定到 html 中的设置。
我想使用 settingA 在子组件中制作 table。
但是在父组件的 ngOnInit 完成之前调用了子组件 ngOnInit。
因此子组件中的设置变量未定义。
我需要你的建议。
这是父组件
[网格-serialize.component.ts]
@Component({
selector: 'grid-serialize',
templateUrl: './grid-serialize.component.html',
styles: []
})
export class GridSerializeComponent implements OnInit, OnChanges {
tableSetting: TableSetting;
settingA: TableSetting;
rows: Bom[] = [];
cols: ColumnSettings[] = [];
userId: string;
url: string;
area: string;
constructor(
private router: Router,
private tableService: TableService,
private localStorageService: GridService
) {}
ngOnInit(): void {
this.userId = 'user01';
this.url = this.router.url;
const areaA = 'upper';
const rowDataPathA = 'aaa/aaa/data.json';
const columnDataPathA = 'bbb/bbb/column.json';
const reorderableColumnsA = false;
const resizableColumnsA = false;
const paginatorA = true;
const paginatorRowsA = 10;
this.tableService.setColumnDataPath(columnDataPathA);
this.tableService.setRowDataPath(rowDataPathA);
this.tableService.getRowData().subscribe((rowData) => {
console.log('---- getRowData() -----');
this.rows = rowData;
console.log('this.rows = ', this.rows);
this.localStorageService
.fetchColumns(this.userId, this.url, areaA)
.subscribe((columnData) => {
if (columnData && columnData.length > 0) {
this.cols = columnData;
this.settingA = new TableSetting(
this.userId,
this.url,
areaA,
resizableColumnsA,
reorderableColumnsA,
this.cols,
this.rows,
paginatorA,
paginatorRowsA,
columnDataPathA
);
} else {
this.tableService
.getColumnSetting()
.subscribe((initData) => {
console.log('*** getColumnSetting() ***');
this.cols = initData;
console.log('this.cols = ', this.cols);
this.settingA = new TableSetting(
this.userId,
this.url,
areaA,
resizableColumnsA,
reorderableColumnsA,
this.cols,
this.rows,
paginatorA,
paginatorRowsA,
columnDataPathA
);
});
}
});
});
}
}
settingA 绑定到子组件中的设置变量
这是父component.html
[网格序列化。component.html]
<grid-table [setting]="settingA"></grid-table>
这是子组件
[table.component.ts]
@Component({
selector: 'grid-table',
templateUrl: './table.component.html',
styles: []
})
export class TableComponent implements OnInit, OnDestroy {
@ViewChild(Table) tableComponent: Table;
@Input() setting: TableSetting;
@Input() clickedEvent: string;
area: string;
paginatorRows: number;
paginator: boolean;
resizable: boolean;
reordable: boolean;
userId: string;
msgs: Message[] = [];
checkAll: Boolean = false;
url: string;
defaultCols: ColumnSettings[] = [];
cols: ColumnSettings[] = [];
rows: Bom[] = [];
private subscription: Subscription;
constructor(
) {}
ngOnInit(): void {
⬇︎⬇︎⬇︎⬇︎⬇︎ this.setting is undefiend ⬇︎⬇︎⬇︎⬇︎⬇︎
console.log('this.setting = ', this.setting);
this.tableComponent.reset();
this.resizable = true;
this.reordable = true;
this.resizable = this.setting.resizableColumns;
this.reordable = this.setting.reorderableColumns;
this.paginator = this.setting.paginator;
this.paginatorRows = this.setting.paginatorRows;
this.service.setColumnDataPath(this.setting.columnDataPath);
this.cols = this.setting.columnData;
this.rows = this.setting.rowData;
}
}
这是子组件 html
[table.component.html]
<p-table [paginator]="paginator" [rows]="paginatorRows" [columns]="cols" [value]="rows" [resizableColumns]="resizable" [reorderableColumns]="reordable">
<ng-container>
<ng-container *ngTemplateOutlet="gridTableHeader"></ng-container>
</ng-container>
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns" pReorderableColumn pResizableColumn [ngStyle]="col.style" [pSortableColumn]="col.field">
<span *ngIf="col.type === 'text'">
{{ col.caption | translate }}
<p-sortIcon [field]="col.field"></p-sortIcon>
</span>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr>
<td *ngFor="let col of columns">
<span *ngIf="col.type === 'text'">
{{ rowData[col.field] }}
</span>
</td>
</tr>
</ng-template>
</p-table>
您可以添加一个 *ngIf
来检查它是否已加载,一旦 settingA 值可用,您的子组件将被渲染
<grid-table *ngIf="settingA" [setting]="settingA" [clickedEvent]="event"></grid-table>
首先,在ngOnInit()中制作table设置数据并设置到settingA变量。
此设置变量绑定到 html 中的设置。
我想使用 settingA 在子组件中制作 table。
但是在父组件的 ngOnInit 完成之前调用了子组件 ngOnInit。
因此子组件中的设置变量未定义。
我需要你的建议。
这是父组件 [网格-serialize.component.ts]
@Component({
selector: 'grid-serialize',
templateUrl: './grid-serialize.component.html',
styles: []
})
export class GridSerializeComponent implements OnInit, OnChanges {
tableSetting: TableSetting;
settingA: TableSetting;
rows: Bom[] = [];
cols: ColumnSettings[] = [];
userId: string;
url: string;
area: string;
constructor(
private router: Router,
private tableService: TableService,
private localStorageService: GridService
) {}
ngOnInit(): void {
this.userId = 'user01';
this.url = this.router.url;
const areaA = 'upper';
const rowDataPathA = 'aaa/aaa/data.json';
const columnDataPathA = 'bbb/bbb/column.json';
const reorderableColumnsA = false;
const resizableColumnsA = false;
const paginatorA = true;
const paginatorRowsA = 10;
this.tableService.setColumnDataPath(columnDataPathA);
this.tableService.setRowDataPath(rowDataPathA);
this.tableService.getRowData().subscribe((rowData) => {
console.log('---- getRowData() -----');
this.rows = rowData;
console.log('this.rows = ', this.rows);
this.localStorageService
.fetchColumns(this.userId, this.url, areaA)
.subscribe((columnData) => {
if (columnData && columnData.length > 0) {
this.cols = columnData;
this.settingA = new TableSetting(
this.userId,
this.url,
areaA,
resizableColumnsA,
reorderableColumnsA,
this.cols,
this.rows,
paginatorA,
paginatorRowsA,
columnDataPathA
);
} else {
this.tableService
.getColumnSetting()
.subscribe((initData) => {
console.log('*** getColumnSetting() ***');
this.cols = initData;
console.log('this.cols = ', this.cols);
this.settingA = new TableSetting(
this.userId,
this.url,
areaA,
resizableColumnsA,
reorderableColumnsA,
this.cols,
this.rows,
paginatorA,
paginatorRowsA,
columnDataPathA
);
});
}
});
});
}
}
settingA 绑定到子组件中的设置变量
这是父component.html [网格序列化。component.html]
<grid-table [setting]="settingA"></grid-table>
这是子组件 [table.component.ts]
@Component({
selector: 'grid-table',
templateUrl: './table.component.html',
styles: []
})
export class TableComponent implements OnInit, OnDestroy {
@ViewChild(Table) tableComponent: Table;
@Input() setting: TableSetting;
@Input() clickedEvent: string;
area: string;
paginatorRows: number;
paginator: boolean;
resizable: boolean;
reordable: boolean;
userId: string;
msgs: Message[] = [];
checkAll: Boolean = false;
url: string;
defaultCols: ColumnSettings[] = [];
cols: ColumnSettings[] = [];
rows: Bom[] = [];
private subscription: Subscription;
constructor(
) {}
ngOnInit(): void {
⬇︎⬇︎⬇︎⬇︎⬇︎ this.setting is undefiend ⬇︎⬇︎⬇︎⬇︎⬇︎
console.log('this.setting = ', this.setting);
this.tableComponent.reset();
this.resizable = true;
this.reordable = true;
this.resizable = this.setting.resizableColumns;
this.reordable = this.setting.reorderableColumns;
this.paginator = this.setting.paginator;
this.paginatorRows = this.setting.paginatorRows;
this.service.setColumnDataPath(this.setting.columnDataPath);
this.cols = this.setting.columnData;
this.rows = this.setting.rowData;
}
}
这是子组件 html [table.component.html]
<p-table [paginator]="paginator" [rows]="paginatorRows" [columns]="cols" [value]="rows" [resizableColumns]="resizable" [reorderableColumns]="reordable">
<ng-container>
<ng-container *ngTemplateOutlet="gridTableHeader"></ng-container>
</ng-container>
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns" pReorderableColumn pResizableColumn [ngStyle]="col.style" [pSortableColumn]="col.field">
<span *ngIf="col.type === 'text'">
{{ col.caption | translate }}
<p-sortIcon [field]="col.field"></p-sortIcon>
</span>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr>
<td *ngFor="let col of columns">
<span *ngIf="col.type === 'text'">
{{ rowData[col.field] }}
</span>
</td>
</tr>
</ng-template>
</p-table>
您可以添加一个 *ngIf
来检查它是否已加载,一旦 settingA 值可用,您的子组件将被渲染
<grid-table *ngIf="settingA" [setting]="settingA" [clickedEvent]="event"></grid-table>