Question

我正在材料步进器上使用ComponentFactory动态加载组件，我想隐藏先前的组件并在每个步骤中加载新组件。

当前代码-目前，我的组件正在加载每个步骤，但是它正在销毁先前的组件并正在加载新的组件广告，我不想销毁先前的组件。请在我的代码下面找到

ComponentLoad方法：-

 loadComponent(CurrentindexValue: any) {


        this.currentAdIndex = CurrentindexValue;
        this.currentAdIndex = (this.currentAdIndex) % this.wizardValue.component.length;
        let adComponentItem = this.wizardValue.component[this.currentAdIndex];
        console.log(adComponentItem);
        const factories = Array.from(this.componentFactoryResolver['_factories'].keys());
        var factoryClass = <Type<any>>factories.find((x: any) => x.name === adComponentItem);

        let componentFactory = this.componentFactoryResolver.resolveComponentFactory(factoryClass);

        let viewContainerRef = this.adhost;
        viewContainerRef.clear();
        let componentRef = this.adhost.createComponent(componentFactory);



        this.interval = componentRef
    }

get()

import { Component, ViewChild, ViewChildren, Input, OnInit, ComponentFactoryResolver, OnDestroy, ViewContainerRef, AfterViewInit, QueryList, HostBinding } from '@angular/core';
import { FormGroup, Validators, FormBuilder } from '@angular/forms';
import { MatStepper } from '@angular/material';
import { AdComponentItem } from 'src/app/shared/addcomponent';
import { ActivatedRoute, Router } from '@angular/router';
import { NewWizardService } from 'src/app/shared/newwizard.service';
import { Type } from '@angular/core';


export class Wizard {
    id: number;
    Action: string;
    Title: string[];
    component: string[];

}
interface Step {
    label: string;
    id: any;
    componentName: any;
}

@Component({
    selector: 'new-wizard',
    templateUrl: './newwizard.component.html',
    styleUrls: ['./newwizard.component.css'],
})
export class CreateDatasourceWizardComponent implements OnInit, OnDestroy, AfterViewInit {
    @Input() ads: AdComponentItem[];
    private isButtonVisible = false;
    wizards: Wizard[];
    wizardcountry: string[];
    wizardcomponent: Wizard[];
    wizardValue: Wizard;
    currentIndex: any;
    cmpRef = [];
    currentAdIndex = -1;
    querypvalue: any;
    show: boolean;
    myvar: any;
    @ViewChild('stepper') stepper: MatStepper;
    @ViewChild('adhost', { read: ViewContainerRef }) adhost: ViewContainerRef;
    @HostBinding('hidden')
    isHidden: boolean = false;
    interval: any;


    constructor(private componentFactoryResolver: ComponentFactoryResolver,
        private route: ActivatedRoute, private _router: Router, private wizardData: NewWizardService) {
        this.wizards = [];

    }
    ngOnInit() {

        this.getWizardData();
        this.currentIndex = this.stepper.selectedIndex;

    }

    ngOnDestroy() {
        
        // this.interval.destroy();
    }
    ngAfterViewInit() {

        this.loadComponent(this.stepper.selectedIndex);
       

    }

    getWizardData(): void {

        this.wizardData.getData().then((result) => {
            this.wizards = result;

            this.route.queryParams.subscribe(params => {
                this.querypvalue = params['action'];
                this.setupWizard(this.querypvalue);
            });

        })
    }

    setupWizard(value: string): void {

        this.wizardValue = this.wizards.find(c => c.Action == value);
        console.log(this.wizardValue);

    }

    loadComponent(CurrentindexValue: any) {


        this.currentAdIndex = CurrentindexValue;
        this.currentAdIndex = (this.currentAdIndex) % this.wizardValue.component.length;
        let adComponentItem = this.wizardValue.component[this.currentAdIndex];
        console.log(adComponentItem);
        const factories = Array.from(this.componentFactoryResolver['_factories'].keys());
        var factoryClass = <Type<any>>factories.find((x: any) => x.name === adComponentItem);

        let componentFactory = this.componentFactoryResolver.resolveComponentFactory(factoryClass);
        let viewContainerRef = this.adhost;
        viewContainerRef.clear();
        let componentRef = this.adhost.createComponent(componentFactory);
        this.interval = componentRef
    }
  

    goBack(stepper: MatStepper) {
        stepper.previous();

        console.log(stepper.selectedIndex);
        this.currentIndex = stepper.selectedIndex
        this.loadComponent(stepper.selectedIndex);
        //this.loadPreviousComponent(stepper.selectedIndex);

    }
    goForward(stepper: MatStepper) {
        stepper.next();

        this.loadComponent(stepper.selectedIndex);

    }
}

<div class="ui-widget-header">
        <span class="field-caption" style="margin-left: 15px;">{{wizardValue.Action}}</span>
    </div>
<div class="container-fluid">
    
<div class="row">
<div class="col-md-12">
    <mat-horizontal-stepper [@.disabled]="true" [linear]="true" #stepper class="stepper-class">
        <mat-step *ngFor="let i of wizardValue.Title">
            <ng-template matStepLabel>{{i}}
            </ng-template>
           
        </mat-step>
       
    </mat-horizontal-stepper>
</div>
</div>
<div class="row">
    <div class="col-md-12">
<mat-card>
  <div *ngFor="let i of wizardValue.component let test = index " [id]="i" >
        <!-- <span (onCreate)="onCreate(test)"></span> -->
        
 <ng-template #adhost></ng-template>
 </div>
  
</mat-card>
</div>
</div>
<div class="row float-right">
<div class="col-md-12 stepper-button">
        <button class="btn btn-primary back-button"  (click)="goBack(stepper)" type="button" [disabled]="stepper.selectedIndex===0">Previous</button>
        <button class="btn btn-primary Next-button" (click)="goForward(stepper)" type="button" [disabled]="stepper.selectedIndex===stepper._steps.length-1">Next</button>
        
    </div>

    
</div>
</div>

步进图像

Answer 1

我认为您应该将实例保存在公共变量中，并在适当的条件下销毁它：

<?php
$number = @$_GET['PhoneNumber'];
if (!preg_match('|\+?[0-9- ]+|', $number))
    die('Invalid PhoneNumber');
header('Content-type: text/xml');
?><?xml version="1.0" encoding="UTF-8"?>
<Response>
    <Dial><?php echo $number; ?></Dial>
    <Say>Hello, Have a good day!</Say>
</Response>

现在您可以破坏方法中的组件了。

public dynamicComponent: any;

loadComponent(CurrentindexValue: any) {
    ...
    this.dynamicComponent = this.adhost.createComponent(componentFactory);
    ...
}

现在，您只需要在需要时调用此方法即可。

Answer 2

您只需要创建一个输入，然后在组件模板中将其用作* ngIf语句

public dynamicComponent: any;

loadComponent(CurrentindexValue: any) {
    ...
    this.dynamicComponent = this.adhost.createComponent(componentFactory);
    this.dynamicComponent.hided.subscribe(t => {
        this.hided.emit(true);
        // this is for recalling
    })
} 

hideIt(){
    this.dynamicComponent.hide = true; 
}

在您的组件中：

@Input('hide')
set hide(value: boolean) {
this.emidHided();
}
@Output() hided: EventEmitter<>;


public emitHided() {
    this.hided.emit()
}

语法需要一些修正

如何在Angular 6中隐藏动态创建的组件

2 个答案: