Question

我正在尝试在Angular 5中动态加载组件。我使用Angular Guide来做这件事，但我现在卡住了。事情是;我收到以下错误：

错误TypeError：无法读取未定义
的属性'viewContainerRef'

错误发生在ChecklistComponent

const viewContainerRef = this.appHost.viewContainerRef;

出于某种原因，appHost未定义，我不明白为什么。

以下是我的其余代码：

checklist.component.ts

import {
    AfterViewInit, Component, ComponentFactoryResolver, Input, OnInit, ViewChild,
    ViewEncapsulation
} from '@angular/core';
import {ChecklistDirective} from "./checklist.directive";
import {ChecklistMainComponent} from "./checklist-main/checklist-main.component";

@Component({
    selector: 'app-checklist',
    templateUrl: './checklist.component.html',
    styleUrls: ['./checklist.component.scss'],
    encapsulation: ViewEncapsulation.None
})
export class ChecklistComponent implements OnInit {

    @ViewChild('modalElement') modalElement;
    @ViewChild(ChecklistDirective) appHost: ChecklistDirective;

    constructor(private componentFactoryResolver: ComponentFactoryResolver) {
    }

    ngOnInit() {
        this.loadComponent();
    }

    loadComponent() {

        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(ChecklistMainComponent);
        const viewContainerRef = this.appHost.viewContainerRef;
        viewContainerRef.clear();
        const componentRef = viewContainerRef.createComponent(componentFactory);

    }

}

checklist.component.html

<ng-template #modalElement let-c="close" let-d="dismiss">
    <div class="modal-header">
        <h4 class="modal-title">{{ 'Checklist'| translate }}</h4>
        <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <ng-template appHost></ng-template>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" (click)="c('Close click')">{{ 'Close'| translate }}</button>
        <button type="button" class="btn btn-primary" (click)="onConfirm($event)">{{ 'Confirm'| translate }}</button>
    </div>
</ng-template>

checklist.directive.ts

import {Directive, ViewContainerRef} from '@angular/core';

@Directive({
  selector: '[appHost]'
})
export class ChecklistDirective {

  constructor(public viewContainerRef: ViewContainerRef) { }

}

checklist.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ChecklistComponent } from './checklist.component';
import {DirectivesModule} from '../../theme/directives/directives.module';
import {TranslateModule} from '@ngx-translate/core';
import {AppCommonPipesModule} from '../../pipes/common.pipes.module';
import {SharedTaskModule} from '../task/shared.task.module';

@NgModule({
  imports: [
    CommonModule,
    DirectivesModule,
    SharedTaskModule,
    TranslateModule,
    AppCommonPipesModule,
  ],
  declarations: [
    ChecklistComponent
  ]
})
export class ChecklistModule { }

shared.checklist.module.ts

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {PerfectScrollbarModule} from 'ngx-perfect-scrollbar';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import {FormModule} from '../../components/form/form.module';
import { MultiselectDropdownModule } from 'angular-2-dropdown-multiselect';
import {DirectivesModule} from '../../theme/directives/directives.module';
import { OwlDateTimeModule, OwlNativeDateTimeModule } from 'ng-pick-datetime';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import {SharedModalModule} from '../../components/model/shared.modal.module';
import {AppCommonPipesModule} from '../../pipes/common.pipes.module';
import {SharedDirectiveModule} from '../../directives/shared.directive.module';
import { TranslateModule } from '@ngx-translate/core';
import {ChecklistComponent} from "./checklist.component";
import {ChecklistMainComponent} from "./checklist-main/checklist-main.component";
import {ChecklistViewComponent} from "./checklist-view/checklist-view.component";
import {ChecklistMutateComponent} from "./checklist-mutate/checklist-mutate.component";
import {ChecklistDirective} from "./checklist.directive";

@NgModule({
    imports: [
        CommonModule,
        PerfectScrollbarModule,
        NgxDatatableModule,
        FormsModule,
        FormModule,
        ReactiveFormsModule,
        MultiselectDropdownModule,
        DirectivesModule,
        OwlDateTimeModule,
        OwlNativeDateTimeModule,
        NgbModule,
        SharedModalModule,
        TranslateModule,
        AppCommonPipesModule,
        SharedDirectiveModule
    ],
    declarations: [
        ChecklistComponent,
        ChecklistMainComponent,
        ChecklistViewComponent,
        ChecklistMutateComponent,
        ChecklistDirective
    ],
    exports: [
        ChecklistComponent,
        ChecklistMainComponent,
        ChecklistViewComponent,
        ChecklistMutateComponent,
        ChecklistDirective
    ],
    entryComponents: [ChecklistMainComponent]
})

export class SharedChecklistModule {
}

清单-main.component.ts

import {Component, EventEmitter, Input, OnInit, Output, ViewChild, ViewEncapsulation} from '@angular/core';
import {
    CollectionHttpRequestOptions, CollectionHttpResponse,
    OrderByRequestOptions
} from '../../../services/http.service';
import {ChecklistModel} from '../../../models/checklist.models';
import {ChecklistService} from '../../../services/checklist.service';

@Component({
    selector: 'app-checklist-main',
    templateUrl: './checklist-main.component.html',
    styleUrls: ['./checklist-main.component.scss'],
    encapsulation: ViewEncapsulation.None
})
export class ChecklistMainComponent implements OnInit {

    isLoading = false;
    tableInfo: any = {offset: 0, limit: 10};
    collectionRequestModel = new CollectionHttpRequestOptions();
    collectionResponseModel = new CollectionHttpResponse<ChecklistModel>();

    @ViewChild('myTable') table: any;
    @Input() formData: ChecklistModel = new ChecklistModel();
    @Output() activate = new EventEmitter();

    constructor(private checklistService: ChecklistService) {}

    ngOnInit() {
        this.setPage(this.tableInfo);
    }

    public onSearch(event) {
        this.collectionRequestModel.page = 1;
        this.collectionRequestModel.search = event.target.value;
        this.load();
    }

    load() {
        this.isLoading = true;
        this.checklistService.getCollection(this.collectionRequestModel).subscribe(response => {
            this.collectionResponseModel = response;
            this.isLoading = false;
        });
    }

    onActivate(event) {
        this.activate.emit(event);

        if (event.type === "click") {
            this.loadChecklist(event);
        }
    }

    setPage(pageInfo: any) {
        this.collectionRequestModel.page = (pageInfo.offset + 1);
        this.collectionRequestModel.itemsPerPage = pageInfo.limit;
        this.load();
    }

    onSort(event: any) {
        const sort = event.sorts[0];
        const orderBy = new OrderByRequestOptions();
        orderBy.key = sort.prop;
        orderBy.direction = sort.dir.toUpperCase();

        this.collectionRequestModel.orderBy = [orderBy];

        this.load();
    }

    loadChecklist(event) {
        console.log("Yay");
    }

}

清单-main.component.html

<div class="header">
    <button class="btn btn-outline-success new-checklist-btn">{{ 'New Checklist'| translate }}</button>
</div>

<div class="body">
    <h5>Current Checklists</h5>

    <ngx-datatable #myTable class="material" [rows]="collectionResponseModel.items" [columnMode]="'force'"
                   [headerHeight]="50"
                   [footerHeight]="50" [rowHeight]="'fixed'" [externalPaging]="true"
                   [count]="collectionResponseModel.totalCount" [offset]="tableInfo.offset"
                   [limit]="tableInfo.limit" [loadingIndicator]="isLoading" (activate)="onActivate($event)"
                   (page)='setPage($event)' (sort)='onSort($event)'>

        <ngx-datatable-column name="Naam" prop="name" [flexGrow]="1">
            <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
                {{value}}
            </ng-template>
        </ngx-datatable-column>

    </ngx-datatable>

</div>

Answer 1

@ViewChild()装饰属性仅在ngAfterViewInit生命周期挂钩后可用，并且您在ngOnInit上调用了加载组件函数，这恰好在@ViewChild()之前执行可用。

Answer 2

您正在使用ng-template（<ng-template #modalElement let-c="close" let-d="dismiss">），直到您告诉角色这样做才会呈现。这意味着永远不会渲染使用该指令的第二个/嵌套ng-template，因为外部ng-template未呈现。

看看https://stackblitz.com/edit/angular-tjr4uq 如果您删除ngOnInit中的代码，则会看到a）外部ng-template内的任何内容都未呈现，b）element将在ngAfterViewInit

中未定义

编辑（也许试试）：

import {
  AfterViewInit, ViewContainerRef, Component, ComponentFactoryResolver, Input, OnInit, ViewChild,
    ViewEncapsulation
} from '@angular/core';
import { ChecklistDirective } from "./checklist.directive";
import { ChecklistMainComponent } from "./checklist-main/checklist-main.component";

@Component({
  selector: 'app-checklist',
  templateUrl: './checklist.component.html',
  styleUrls: ['./checklist.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class ChecklistComponent implements OnInit {

  @ViewChild('modalElement') modalElement;
  @ViewChild(ChecklistDirective) appHost: ChecklistDirective;

  constructor(private vc: ViewContainerRef, private componentFactoryResolver: ComponentFactoryResolver) {
  }

  ngOnInit() {
    this.vc.createEmbeddedView(this.modalElement);
  }

  ngAfterViewInit() {
    this.loadComponent();
  }

  loadComponent() {

    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(ChecklistMainComponent);
    const viewContainerRef = this.appHost.viewContainerRef;
    viewContainerRef.clear();
    const componentRef = viewContainerRef.createComponent(componentFactory);

  }

}

Angular 5 - 动态组件加载器 - 无法读取未定义的属性“viewContainerRef”

2 个答案: