时间戳

首页 > 解决方案 > 角度 10 - 在其他组件中加载组件

angular - 角度 10 - 在其他组件中加载组件

问题描述

在 AngularJS 中，可以在模板中使用 $compile 加载组件。

我尝试像这样使用 Angular 10 做到这一点：

import {AfterViewInit, Component, ComponentFactoryResolver, OnInit, ViewChild, ViewContainerRef, ComponentRef} from '@angular/core';
import { LoginFormComponent } from '../../component/login-form/login-form.component';

@Component({
    selector: 'app-on-boarding',
    templateUrl: './on-boarding.component.html',
    styleUrls: ['./on-boarding.component.sass']
})
export class OnBoardingComponent implements OnInit, AfterViewInit {

    @ViewChild('container', {read: ViewContainerRef}) target: ViewContainerRef;


    private readonly componentFactoryResolver: ComponentFactoryResolver;

    constructor(componentFactoryResolver: ComponentFactoryResolver) {
        this.componentFactoryResolver = componentFactoryResolver;
    }

    ngAfterViewInit(): void {
        const factory = this.componentFactoryResolver.resolveComponentFactory(LoginFormComponent);
        const component = this.target.createComponent(factory);
        console.log(factory);
        console.log(component);
    }

    ngOnInit(): void {

    }

}

模板'./on-boarding.component.html'：

<div #container></div>

但什么也没有发生。没有错误，#container 中没有组件加载。

标签： angular

解决方案

用它来解决孩子#container只是一半的工作。您需要正确包含您的子组件。如果您的孩子看起来接近这个：

@Component({
    selector: 'app-container',
    ...
})

那么你父母的模板应该是这样的：

<app-container #container></app-container>

进一步阅读：https ://angular.io/api/core/ViewChild

推荐阅读