无法动态加载组件

我试图创建一个示例应用程序，我想在父组件的按钮单击事件中动态加载组件。但是，当我点击按钮组件未加载，而是在浏览器控制台中收到以下错误。请访问plunker为应用程序代码无法动态加载组件

zone.js:461Unhandled Promise rejection: Cannot read property 'createComponent' of undefined ; Zone: angular ; Task: Promise.then ; Value: TypeError: Cannot read property 'createComponent' of undefined 
    at eval (https://run.plnkr.co/EQ3xbfuUPWfMTU2C/src/app.ts!transpiled:38:45) 
    at ZoneDelegate.invoke (https://npmcdn.com/[email protected]/dist/zone.js:323:29) 
    at Object.onInvoke (https://npmcdn.com/@angular/core/bundles/core.umd.js:9100:45) 
    at ZoneDelegate.invoke (https://npmcdn.com/[email protected]/dist/zone.js:322:35) 
    at Zone.run (https://npmcdn.com/[email protected]/dist/zone.js:216:44) 
    at https://npmcdn.com/[email protected]/dist/zone.js:571:58 
    at ZoneDelegate.invokeTask (https://npmcdn.com/[email protected]/dist/zone.js:356:38) 
    at Object.onInvokeTask (https://npmcdn.com/@angular/core/bundles/core.umd.js:9091:45) 
    at ZoneDelegate.invokeTask (https://npmcdn.com/[email protected]/dist/zone.js:355:43) 
    at Zone.runTask (https://npmcdn.com/[email protected]/dist/zone.js:256:48)

来源

2016-07-15 Krishnan

如果查询你需要确保它被实例化@ViewChild(Loader, ...)。为此，您需要添加Loader到directives: [...]

directives: [Loader] 
}) 
export class App {

Plunker example

来源

2016-07-15 20:17:15

我接受这个答案，同样的逻辑/代码，我在我的项目应用，并试图在本地，我包括在该组件在被加载指令。但仍然在浏览器控制台中发现异常，并且组件未正确加载。你可以请回应这个查询http://stackoverflow.com/questions/38360904/typeerror-cannot-read-property-createcomponent-of-undefined – Krishnan

在您共享的plunker，它创建实例多次低于其他，而不是有可能用新实例替换现有的实例，当我点击按钮，即在任何时间点，我只想要加载一个实例，任何想法如何做到这一点？ – Krishnan

对不起，我忘了你的评论。 “收件箱”并不像你收到很多评论时那样舒服......我回答了http://stackoverflow.com/questions/38442546/how-to-avoid-creating-multiple-instance-of -the-相同组分 –

无法动态加载组件

回答

相关问题