Angular 9使用viewContainerRef加载动态组件得到未定义的结果
可能是由于以下几个原因导致的：
- 组件未正确引入：在使用viewContainerRef加载动态组件之前，需要确保该组件已经正确地引入到当前的模块中。可以通过在模块文件中的
imports数组中添加组件的引用来解决此问题。 - 组件未正确声明：在使用viewContainerRef加载动态组件之前，需要在当前模块或组件的
declarations数组中声明该组件。确保在使用之前已经正确地声明了该组件。 - 组件未正确注册：在使用viewContainerRef加载动态组件之前，需要在当前模块或组件的
entryComponents数组中注册该组件。这是因为动态加载组件需要在编译时进行组件的解析和编译，而不是在模板中静态地引用。通过将组件添加到entryComponents数组中，可以告诉Angular编译器该组件可能会被动态加载。 - 组件未正确创建：在使用viewContainerRef加载动态组件之前，需要确保正确地创建了该组件的实例。可以使用
ComponentFactoryResolver来创建组件实例，并将其插入到viewContainerRef中。 - 组件的依赖未正确注入：如果动态加载的组件依赖于其他服务或组件，需要确保这些依赖项已经正确地注入到组件中。可以使用Angular的依赖注入机制来解决此问题。
如果以上步骤都正确执行，但仍然得到未定义的结果，可能是由于其他代码逻辑或配置问题导致的。可以通过调试代码、查看错误日志或与社区进行交流来进一步排查和解决问题。
对于Angular 9中使用viewContainerRef加载动态组件的更多信息和示例，可以参考腾讯云的相关文档和示例代码：
请注意，以上答案仅供参考，具体解决方法可能因实际情况而异。
相关·内容
1回答
没有找到未定义的组件工厂。你把它加到@NgModule.entryComponents了吗？
angular、angular-cli-v6、angular-library
我已经创建了一个角6组件库。该库基于PrimeNG组件。库中的一个组件是表组件(基于PrimeNG表)。
为了允许库的用户在我创建的(库中)表的单元格中添加一个名为“VarintComponent”的组件，该组件有两个输入：
1) GuestComponent: String
2) GuestComponentData:任何
表的用户可以声明列包含VariantComponent，并将组件的名称传递给GuestComponent输入。在运行时，VariantComponent使用componentFactoryResolver和viewContainerRef动态创建和加载组件。
import
浏览 0提问于2018-08-23得票数 0
回答已采纳
1回答
如何测试组件是否被动态加载在角7业力测试中？
angular、karma-jasmine
我制作了一个组件，在其中动态加载另一个组件，该组件在ng serve上运行良好。下面是动态加载组件的代码。
import { Component, OnInit, ViewChild, ComponentFactoryResolver, Type, Input} from '@angular/core';
import { AddComponentDirective } from '../add-component.directive';
import { DynamicComponent } from '../dynamic/dynamic.compo
浏览 0提问于2019-01-04得票数 7
2回答
如何从组件访问“根”ViewContainerRef
angular、dependency-injection、components
我正在创建一个“组件工厂”来帮助我动态创建组件。此工厂用于创建组件，如: PopOvers、模态、覆盖等。
它有一个用于创建组件的attach方法：
attach<T>(component: ComponentType<T>, viewContainerRef: ViewContainerRef): ComponentRef<T> {
let componentFactory =
this.componentFactoryResolver.resolveComponentFactory(component);
let ref
浏览 3提问于2016-09-27得票数 2
1回答
如何向NgModule entryComponents运行时添加项？
angular、angular-services
我有以下的角码：
dashboard.component.ts
import {Component, AfterViewInit, ComponentFactoryResolver, ViewContainerRef, OnInit, Input} from "@angular/core";
import {WidgetItem} from "../modules/widget-item";
import {WidgetComponent} from "../modules/widget.component";
import {Dashboard
浏览 1提问于2017-06-15得票数 4
回答已采纳
我使用以下代码在HTMLElement中创建动态组件：
import {ApplicationRef, ComponentFactory, ComponentFactoryResolver, ComponentRef, Injector} from '@angular/core';
import {DynamicTableComponent} from '../table/dynamic-table/dynamic-table.component';
export class Table {
private readonly el: Elem
浏览 4提问于2022-02-01得票数 15
2回答
如何获得在角v13中动态加载的组件的模块？
angular、angular13
在v12中，您可以使用以下代码动态加载/导入组件，通过ComponentFactory访问其NgModule，然后使用ViewContainerRef将其添加到DOM中。
const injector: Injector = /* injected */
const cfg: ComponentFactoryResolver = /* injected */
const module = await import('path/to/component/file');
const componentDef = module['MyComponent'];
cons
浏览 8提问于2022-01-27得票数 3
1回答
为什么添加一个材料模块会破坏动态组件的插入？
angular、angular-material2、ng-modules
下面是使用动态组件创建的StackBlitz上的两个MCVEs。我想知道为什么：
工作。
但是不能工作，只是在将一个物质模块(MatButtonModule)导入到动态创建的模块之后。
有谁有主意吗？
起作用的例子
app.component.ts
import { Component, ChangeDetectionStrategy, OnDestroy, ChangeDetectorRef, ViewChild, ViewContainerRef, Input, Compiler, Injector, NgModuleRef, SimpleChanges, NgModule
浏览 0提问于2018-11-11得票数 1
回答已采纳
1回答
“离子标题”不是已知的元素:在动态创建组件时
angular、ionic-framework、components
我正在尝试动态添加组件ngOnInit。在创建组件时，我会得到这个错误。
"Uncaught (in promise): Error: Template parse errors: 'ion-title' is not a
known element"
这是我的代码：
TS：
import { Component,Input, OnInit, Compiler, Injector, VERSION, ViewChild,
NgModule, NgModuleRef, ViewContainerRef, AfterViewInit,
浏览 0提问于2018-11-23得票数 4
回答已采纳
1回答
在div - Angular5中动态加载组件
angular、view、components
我成功地创建了一个按钮，单击该按钮将组件的另一个实例加载到DOM中，但它会将其加载到我希望它位于的组件之外，从而导致CSS关闭。当我将"editorComponents“添加到我的页面时，它现在看起来如下所示：
但我想让它看起来像这样
您可以从检查中看到，在第二个示例中，所有标记都手动移动到我希望它们位于的位置。
现在，我的代码如下：
home.component.html
<div class="row backgroundContainer">
<div class="col-md-7 componentCon
浏览 0提问于2018-02-10得票数 11
回答已采纳
2回答
动态清晰度应用程序级别警报
angular、dynamic、angular2-changedetection、vmware-clarity、clarity
我正在使用，并试图使用动态组件加载来实现动态应用程序级警报。我以前也遵循过这种模式，但我似乎无法让它与清晰的警报一起工作。
app.component.ts
import { AfterViewInit, Component, ComponentFactoryResolver, OnDestroy, ViewChild } from '@angular/core';
import { ClrAlert } from '@clr/angular';
import { AlertsHostDirective } from './directives/ale
浏览 0提问于2018-02-08得票数 1
回答已采纳
1回答
当路由延迟加载到角8中时，无法解析动态实例化组件
angular、lazy-loading、angular-router、lazy-initialization
我有一个延迟加载模块，在延迟加载模块中有这样一个路径：
{
path: 'window',
component: CustomerFormComponent,
canActivate: [FormGuard],
}
我使用FormGuard来停止导航并打开一个对话框。我动态地实例化组件CustomerFormComponent，它在窗口中呈现。在我将这些路由移动到一个新模块(在路由中使用loadChildren )以延迟加载模块之前，一切都很正常。我有此错误，因为它无法在调用this.componentFactoryResolver.resolv
浏览 0提问于2019-07-29得票数 1
回答已采纳
1回答
未找到未定义的组件工厂。你把它添加到@NgModule.entryComponents了吗？
angular、jasmine
我正在为我的angular 8应用程序编写一个jasmine测试，用于测试在单击事件上是否调用了onOverlayClicked方法。在运行测试时，我收到以下错误
Error: No component factory found for undefined. Did you add it to @NgModule.entryComponents?
error properties: Object({ ngComponent: undefined, ngDebugContext: DebugContext_({ view: Object({ def: Object({ fact
浏览 18提问于2020-02-25得票数 0
回答已采纳
2回答
自举模态中角分量的动态加载
angular、typescript、ng-bootstrap
我正在尝试在我的应用程序中建立一个可重用的quickView模型，以便使用动态加载任何组件。
它运行得很好，因为我加载的示例组件与docs中显示的相同，但对于我创建的用于测试的组件则不是这样。
如何使用quickView模型在modal-body中加载动态组件创建
我使用简单的if/ the来基于名称string在该模型中打开一个组件。
<button class="btn btn-lg btn-outline-secondary mr-2" (click)="open('default')">Launch default</
浏览 2提问于2021-03-02得票数 2
回答已采纳
1回答
使用服务动态加载NgModule entryComponents
angular、typescript、dynamic、components
你好，我是angular2和打字本的新手。我正在动态加载组件，我想知道是否有一种方法可以使用模块的“声明”和"entryComponents“中的服务来声明组件。
通过使用类型记录，我可以通过以下操作实现它：
import { ComponentLoaderService } from './../../services/component-loader.service';
let componentsToLoad = ComponentLoaderService.getComponents();
@NgModule({
declarations: [ co
浏览 3提问于2016-12-17得票数 10
1回答
错误"ERROR TypeError:无法读取属性'createComponent‘的未定义“时，使用Angular2中的动态组件
javascript、angular、typescript
我正在尝试在angular4中动态添加组件。我问了其他问题，但我找不到解决办法。我得到了错误
错误TypeError:无法读取未定义的属性“createComponent”
关于动态部件。
adv.component.ts
import { Component, OnInit, AfterContentInit, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { SampleComponent } from '../sample/sampl
浏览 4提问于2017-09-08得票数 5
回答已采纳
2回答
使用角2创建独立模态对话框服务
javascript、angular2-services
我在googling上搜索了很长一段时间，以研究如何在角2中创建动态对话框组件。几乎所有这些都建议如下：
为动态组件创建占位符。
使用ComponentFactoryResolver动态创建组件在打开的对话框中显示
在app模块中使用entryComponents使编译器能够了解自定义组件的工厂
这一切都很棒，但在我的项目中，我必须实现一个独立的模式服务，就像或一样，但是没有这些库为最终用户提供的大量定制和设置。创建这种功能的步骤可以是什么？
浏览 3提问于2017-05-12得票数 0
回答已采纳
1回答
用ComponentFactoryResolver导入角动态组件:传入的类型不是ComponentType
angular、typescript、webpack
我试图减少我的角度应用程序的主包大小，我最近的工作是动态地加载模块组件，而不是通过静态导入它们。文件夹结构(以及父-子关系)如下所示：
io-input/io-input.component
├─ date/date.component
├─ ... more components ...
└─ ... more components ...
它驻留在角10项目中，在角库中。此库作为一个模块导入到同一个角项目中的角应用程序中。当我用ng serve编译应用程序时，这个应用程序会遇到围绕io-input组件的错误(特别是动态导入子组件的代码)。
ERROR Error: ASSERTION ER
浏览 0提问于2020-09-12得票数 1
回答已采纳
2回答
如何使用类型记录2.4的import()方法动态获取entryComponents
javascript、angular、typescript
Typescript 2.4将[import()][1]方法引入到动态加载模块中。我正在尝试使用下面提到的过程动态加载组件，其中我们需要在模块中提到entryComponents。我能够使用import()方法动态加载AppModule中的所有组件模块，但无法获得模块的entryComponents。例如，我有一个组件及其模块。
数据-宽度。组件：
@Component({
selector: 'data-widget',
templateUrl: 'data-widget.component.html'
})
export class
浏览 1提问于2017-09-08得票数 1
回答已采纳
1回答
使用json模式的Angular 4动态组件加载
json、angular、components、on-the-fly
我正在创建一个小的poc，以尝试是否可以根据给定的json数据结构加载组件。json将提供组件选择器的数组。根据我在网上找到的参考资料，我尝试了一个小例子。我使用了Angular推荐的"componentFactoryResolver“。
我基本上创建了几个组件，并在模块中使用entrycomponent装饰器注册了它，如下所示
entryComponents: [PersonalDetailsComponent, ContactDetailsComponent],
在我的应用程序组件中，我使用了以下代码
@ViewChild('dynamicInsert', {
浏览 11提问于2017-10-15得票数 2
1回答
动态组件加载器Angular2终版
angular、ionic2
我试图创建一个这样的组件动态：
这是我的文件dynamicComponent.ts：
import {Directive, Input, ViewContainerRef, Component, ReflectiveInjector, ComponentFactory, ComponentFactoryResolver} from '@angular/core';
export function createComponentFactory(resolver: ComponentFactoryResolver, metadata: Component): Promise<
浏览 5提问于2016-10-05得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
