英文:
view child component undefined
问题
我有一个父组件（DepotSelectionComponent）和一个子组件（SiteDetailsComponent）。一个事件（moreDetails）被发射到父组件。然后，该事件调用了父组件中的getDetailsPage()函数，该函数使用ngswitch更改页面并加载一些数据。然而，我试图加载的组件似乎是未定义的，因此通过viewchild装饰器引用该组件的方式不起作用。
我确定这与ngswitch有关，但我似乎无法弄清楚如何修复它，我尝试了添加超时。populateResults函数有效，因为该组件已经加载，但由于组件未定义并且尚未通过开关加载，populateDepotResults函数不起作用。
父组件（DepotSelectionComponent）HTML：
<div class="main">
<div [ngSwitch]="page">
<div *ngSwitchCase="'siteLandingPage'">
<div class="interactiveMap">
<app-interactive-map (siteDetailTable)="populateResults($event)"></app-interactive-map>
</div>
<div class="mapResult">
<app-map-result (moreDetails)="getDetailsPage($event)"></app-map-result>
</div>
</div>
<div *ngSwitchCase="'siteMoreDetails'">
<div>
<button mat-raised-button (click)="home()">Back</button>
</div>
<div class="clearFloat"></div>
<app-site-details [siteDetailsar]="siteDetailsar" (depotMoreDetails)="depotMoreDetails($event)"></app-site-details>
</div>
<div *ngSwitchCase="'depotMoreDetails'">
<div>
<button mat-raised-button (click)="getDetailsPage()">Back</button>
</div>
<div class="clearFloat"></div>
<app-depot-parent></app-depot-parent>
</div>
</div>
</div>
父组件（DepotSelectionComponent）TS：
import { Component, OnInit, ViewChild, ChangeDetectorRef } from '@angular/core';
import { MapResultComponent } from '../map-result/map-result.component';
import { SiteService } from '../shared/services/site-service';
import { siteDetails } from '../shared/interfaces/site-details.interface';
import { MatTableDataSource } from '@angular/material';
import { DepotService } from '../shared/services/depot-service';
import { depotDetails } from '../shared/interfaces/depot-details.interface';
import { SiteDetailsComponent } from '../site-details/site-details.component';
@Component({
selector: 'app-depot-selection',
templateUrl: './depot-selection.component.html',
styleUrls: ['./depot-selection.component.scss']
})
export class DepotSelectionComponent implements OnInit {
siteDetailsar: Array<{ Site_ID: number, Address1: string, Address2: string, Town: string, County: string, PostCode: string, Name: string, Description: string, TelephoneNumber: string }> = [];
page: string;
countyName: string;
@ViewChild(MapResultComponent, { static: false })
private MapResultComponent: MapResultComponent;
@ViewChild(SiteDetailsComponent, { static: false })
private SiteDetailsComponent: SiteDetailsComponent;
constructor(
private _siteService: SiteService,
private _depotService: DepotService,
private changeDetectorRef: ChangeDetectorRef) { }
ngOnInit() {
this.page = "siteLandingPage";
console.log('on init', this.SiteDetailsComponent);
// this returns undefined
}
ngAfterViewInit() {
console.log('on after view init', this.SiteDetailsComponent);
// this returns null
}
home() {
this.page = "siteLandingPage";
}
getDetailsPage(event) {
this.page = "siteMoreDetails";
var target = event.target || event.srcElement || event.currentTarget;
var idAttr = target.attributes.id;
this.getSiteDetailsByID(event.target.id);
this.populateDepotResults(event.target.id);
this.changeDetectorRef.detectChanges();
}
depotMoreDetails() {
this.page = "depotMoreDetails";
}
getSiteDetailsByID(id: number) {
this.siteDetailsar.length = 0;
this._siteService.getSiteByID(id)
.subscribe((data: any[]) => {
data.forEach(e => {
this.siteDetailsar.push(new siteDetails(e.Site_ID, e.Address1, e.Address2, e.Town, e.County, e.PostCode, e.Name, e.Description, e.TelephoneNumber));
})
});
}
populateDepotResults(id: number) {
console.log(this.SiteDetailsComponent);
this.SiteDetailsComponent.depotResults.length = 0;
this._depotService.getAllDepots(id)
.subscribe((data: any[]) => {
data.forEach(e => {
this.SiteDetailsComponent.depotResults.push(new depotDetails(e.Depot_ID, e.Site_ID, e.Address1, e.Address2, e.Town, e.County, e.PostCode, e.Name, e.Description, e.TelephoneNumber));
})
this.SiteDetailsComponent.dataSource = new MatTableDataSource(this.SiteDetailsComponent.depotResults);
this.SiteDetailsComponent.dataSource.paginator = this.SiteDetailsComponent.paginator;
this.changeDetectorRef.detectChanges();
});
}
populateResults(countyName) {
this.MapResultComponent.mapResultHeader = countyName.dataObj.label;
this.MapResultComponent.siteResults.length = 0;
this._siteService.getSites(countyName.dataObj.label)
.subscribe((data: any[]) => {
data.forEach(e => {
this.MapResultComponent.siteResults.push(new siteDetails(e.Site_ID, e.Address1, e.Address2, e.Town, e.County, e.PostCode, e.Name, e.Description, e.TelephoneNumber));
})
this.MapResultComponent.dataSource = new MatTableDataSource(this.MapResultComponent.siteResults);
this.MapResultComponent.dataSource.paginator = this.MapResultComponent.paginator;
this.changeDetectorRef.detectChanges();
});
}
}
子组件（SiteDetailsComponent）HTML：
<div class="siteInfo">
<div class="depotResultHeader">
<span>Site Information</span>
</div>
<mat-list>
<h3 mat-subheader>General Information</h3>
<mat-list-item>Site Name: {{ siteDetailsar[0].Name }}</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>Site Description: {{ siteDetailsar[0].Description }}</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>Address1: {{ siteDetailsar[0].Address1 }}</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>Address2: {{ siteDetailsar[0].Address2 }}</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>Town: {{
<details>
<summary>英文:</summary>
I have a parent component(DepotSelectionComponent) and a child component(SiteDetailsComponent). An event(moreDetails) is emitted to the parent component. This event then calls the getDetailsPage()function within the parent, which changes the page using ngswitch and also loads some data. However the component what i am trying to load seems to be undefined therefore the references to that component are not working via the viewchild decorator.
I am sure this has something to do with the ngswitch however i just cant seem to figure out how to fix it, i have tried adding timeouts. The populateResults function works due to that component already being loaded however the populateDepotResults dont work due to the component being undefined and not loaded by the switch yet.
parent(DepotSelectionComponent) html:
<div class="main">
<div [ngSwitch]="page">
<div *ngSwitchCase="'siteLandingPage'">
<div class="interactiveMap">
<app-interactive-map (siteDetailTable)="populateResults($event)"></app-interactive-map>
</div>
<div class="mapResult">
<app-map-result (moreDetails)="getDetailsPage($event)"></app-map-result>
</div>
</div>
<div *ngSwitchCase="'siteMoreDetails'">
<div>
<button mat-raised-button (click)="home()">Back</button>
</div>
<div class="clearFloat"></div>
<app-site-details [siteDetailsar]="siteDetailsar" (depotMoreDetails)="depotMoreDetails($event)"></app-site-details>
</div>
<div *ngSwitchCase="'depotMoreDetails'">
<div>
<button mat-raised-button (click)="getDetailsPage()">Back</button>
</div>
<div class="clearFloat"></div>
<app-depot-parent></app-depot-parent>
</div>
</div>
</div>
parent(DepotSelectionComponent) ts:
import { Component,
OnInit,
ViewChild,
ChangeDetectorRef } from '@angular/core';
import { MapResultComponent } from '../map-result/map-result.component';
import { SiteService } from '../shared/services/site-service';
import { siteDetails } from '../shared/interfaces/site-details.interface';
import { MatTableDataSource } from '@angular/material';
import { DepotService } from '../shared/services/depot-service';
import { depotDetails } from '../shared/interfaces/depot-details.interface';
import { SiteDetailsComponent } from '../site-details/site-details.component';
@Component({
selector: 'app-depot-selection',
templateUrl: './depot-selection.component.html',
styleUrls: ['./depot-selection.component.scss']
})
export class DepotSelectionComponent implements OnInit {
siteDetailsar: Array<{Site_ID: number, Address1: string, Address2: string, Town: string, County: string, PostCode: string, Name: string, Description: string, TelephoneNumber: string}> = [];
//depotResults: Array<{Depot_ID:number, Site_ID: number, Address1: string, Address2: string, Town: string, County: string, PostCode: string, Name: string, Description: string, TelephoneNumber: string}> = [];
page:string;
countyName: string;
@ViewChild(MapResultComponent, {static: false})
private MapResultComponent: MapResultComponent;
@ViewChild(SiteDetailsComponent, {static: false})
private SiteDetailsComponent: SiteDetailsComponent;
constructor(
private _siteService: SiteService,
private _depotService: DepotService,
private changeDetectorRef: ChangeDetectorRef) { }
ngOnInit() {
this.page = "siteLandingPage";console.log('on init', this.SiteDetailsComponent);
// this returns undefined
}
ngAfterViewInit() {
console.log('on after view init', this.SiteDetailsComponent);
// this returns null
}
home() {
this.page = "siteLandingPage";
}
getDetailsPage(event) {
this.page = "siteMoreDetails";
var target = event.target || event.srcElement || event.currentTarget;
var idAttr = target.attributes.id;
this.getSiteDetailsByID(event.target.id);
this.populateDepotResults(event.target.id);
this.changeDetectorRef.detectChanges();
}
depotMoreDetails() {
this.page = "depotMoreDetails"
}
getSiteDetailsByID(id: number) {
this.siteDetailsar.length = 0;
this._siteService.getSiteByID(id)
.subscribe((data: any[]) => {
data.forEach(e => {
this.siteDetailsar.push(new siteDetails(e.Site_ID, e.Address1, e.Address2, e.Town, e.County, e.PostCode, e.Name, e.Description, e.TelephoneNumber));
})
});
}
populateDepotResults(id: number) {
console.log(this.SiteDetailsComponent);
this.SiteDetailsComponent.depotResults.length = 0;
this._depotService.getAllDepots(id)
.subscribe((data: any[]) => {
data.forEach(e => {
this.SiteDetailsComponent.depotResults.push(new depotDetails(e.Depot_ID ,e.Site_ID, e.Address1, e.Address2, e.Town, e.County, e.PostCode, e.Name, e.Description, e.TelephoneNumber));
})
this.SiteDetailsComponent.dataSource = new MatTableDataSource(this.SiteDetailsComponent.depotResults);
this.SiteDetailsComponent.dataSource.paginator = this.SiteDetailsComponent.paginator;
this.changeDetectorRef.detectChanges();
});
}
populateResults(countyName) {
this.MapResultComponent.mapResultHeader = countyName.dataObj.label;
this.MapResultComponent.siteResults.length = 0;
this._siteService.getSites(countyName.dataObj.label)
.subscribe((data: any[]) => {
data.forEach(e => {
this.MapResultComponent.siteResults.push(new siteDetails(e.Site_ID, e.Address1, e.Address2, e.Town, e.County, e.PostCode, e.Name, e.Description, e.TelephoneNumber));
})
this.MapResultComponent.dataSource = new MatTableDataSource(this.MapResultComponent.siteResults);
this.MapResultComponent.dataSource.paginator = this.MapResultComponent.paginator;
this.changeDetectorRef.detectChanges();
});
}
}
child(SiteDetailsComponent) html:
<div class="siteInfo">
<div class="depotResultHeader">
<span>Site Information</span>
</div>
<mat-list>
<h3 mat-subheader>General Information</h3>
<mat-list-item >Site Name: {{ siteDetailsar[0].Name }} </mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>Site Description: {{ siteDetailsar[0].Description }}</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>Address1: {{ siteDetailsar[0].Address1 }}</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>Address2: {{ siteDetailsar[0].Address2 }}</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>Town: {{ siteDetailsar[0].Town }}</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>County: {{ siteDetailsar[0].County }}</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>Postcode: {{ siteDetailsar[0].PostCode }}</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>Telephone Number: {{ siteDetailsar[0].TelephoneNumber }}</mat-list-item>
<mat-divider></mat-divider>
</mat-list>
<div class="siteButtons">
<button mat-raised-button (click)="editSiteDialog()">Edit Site Details</button>
<button class="remove" mat-raised-button>Remove Site</button>
</div>
</div>
<div class="depotLocations">
<div class="depotResultHeader">
<span>List Of Depots</span>
</div>
<div class="mat-elevation-z8">
<mat-form-field class="filter">
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
<table mat-table [dataSource]="dataSource">
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Depot Name </th>
<td mat-cell *matCellDef="let element"> {{element.Name}}</td>
</ng-container>
<ng-container matColumnDef="address">
<th mat-header-cell *matHeaderCellDef> Address </th>
<td mat-cell *matCellDef="let element"> {{element.Address1}}</td>
</ng-container>
<ng-container matColumnDef="moreDetails">
<th mat-header-cell *matHeaderCellDef> More Details </th>
<td mat-cell *matCellDef="let element">
<button mat-raised-button (click)="depotMoreDetailsPage($event)">More Details</button>
</td>
</ng-container>
<ng-container matColumnDef="remove">
<th mat-header-cell *matHeaderCellDef> Delete </th>
<td mat-cell *matCellDef="let element">
<button class="remove" mat-raised-button>Remove</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSize]="5" showFirstLastButtons></mat-paginator>
</div>
<div class="addNewDepot">
<button mat-raised-button>Add New Depot</button>
</div>
</div>
child(SiteDetailsComponent) ts:
import { Component, OnInit, ViewChild, Output, EventEmitter, Input } from '@angular/core';
import { MatTableDataSource, MatPaginator, MatDialog, MatDialogConfig } from '@angular/material';
import { SiteInformationDialogComponent } from '../site-information-dialog/site-information-dialog.component';
import { SiteService } from '../shared/services/site-service';
import { siteDetails } from '../shared/interfaces/site-details.interface';
@Component({
selector: 'app-site-details',
templateUrl: './site-details.component.html',
styleUrls: ['./site-details.component.scss']
})
export class SiteDetailsComponent implements OnInit {
constructor(public dialog: MatDialog) { }
displayedColumns: string[] = ['name', 'address', 'moreDetails', 'remove'];
number: number;
result : string;
mapResults: Array<{name: string, town: string, address: string}> = [];
@Input() siteDetailsar: Array<{Site_ID: number, Address1: string, Address2: string, Town: string, County: string, PostCode: string, Name: string, Description: string, TelephoneNumber: string}> = [];
depotResults: Array<{Depot_ID: number, Site_ID: number, Address1: string, Address2: string, Town: string, County: string, PostCode: string, Name: string, Description: string, TelephoneNumber: string}> = [];
dataSource : MatTableDataSource<any>;
@Output() depotMoreDetails = new EventEmitter();
@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
ngOnInit() {
this.dataSource = new MatTableDataSource();
console.log(this.depotResults);
}
/**
* Set the paginator and sort after the view init since this component will
* be able to query its view for the initialized paginator and sort.
*/
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
}
applyFilter(filterValue: string) {
this.dataSource.filter = filterValue.trim().toLowerCase();
}
editSiteDialog(){
const dialogConfig = new MatDialogConfig();
dialogConfig.autoFocus = true;
dialogConfig.disableClose = true;
this.dialog.open(SiteInformationDialogComponent, dialogConfig);
}
depotMoreDetailsPage(changed: string) {
this.depotMoreDetails.emit(changed);
}
}
export interface Data {
name: string;
town: string;
address: string;
telephone: string;
}
</details>
# 答案1
**得分**: 1
首先将`@ViewChild()`更改为`@ViewChildren()`，并使用`QueryList<>`，然后订阅变化。这样，只有在模板正确加载了组件后，您才能等待并加载组件。
```typescript
export class DepotSelectionComponent implements AfterViewInit {
@ViewChildren(SiteDetailsComponent) childrenComponent: QueryList<SiteDetailsComponent>;
public ngAfterViewInit(): void {
this.childrenComponent.changes.subscribe((comps: QueryList<SiteDetailsComponent>) => {
// 现在您可以访问子组件
});
}
}
要检查组件是否已加载或未加载，您首先必须使用@ViewChildren()和QueryList<>，然后您必须订阅changes以侦听详细组件的变化。
英文:
First change @ViewChild() to @ViewChildren() and use QueryList<> and then subscribe to changes of. so, you can get wait and load component only when is template loaded properly for component..
export class DepotSelectionComponent implements AfterViewInit
{
@ViewChildren(SiteDetailsComponent ) childrenComponent: QueryList<SiteDetailsComponent >;
public ngAfterViewInit(): void
{
this.childrenComponent.changes.subscribe((comps: QueryList<SiteDetailsComponent>) =>
{
// Now you can access to the child component
});
}
}
To checking if component is loaded or not you have to first use @ViewChildren() with QueryList<> and for then you have to subscirbe() for changes in details-component...
答案2
得分: -1
你没有在你的组件中实现接口AfterViewInit。
尝试像这样实现：
...
export class DepotSelectionComponent implements OnInit, AfterViewInit {
...
和
...
export class SiteDetailsComponent implements OnInit, AfterViewInit {
...
英文:
You are not implementing the interface AfterViewInit in your components.
Try to implement like this:
...
export class DepotSelectionComponent implements OnInit, AfterViewInit {
...
and
...
export class SiteDetailsComponent implements OnInit, AfterViewInit {
...
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论