我需要使用组件my-app来初始化一个Angular应用程序，但问题是该组件存在于未在页面启动时加载的HTML模板中，因此我必须手动初始化，否则会出现错误并显示以下消息：
错误：选择器“my-app”没有匹配任何元素。
这是否可能？
如何手动初始化Angular 2/4应用程序
3
- Don Dev
1
你可能想坚持使用App模块和App组件作为启动过程的正常流程。你尝试过使用Angular CLI为你生成样板代码吗？ - DeborahK
2个回答
2
如果您正在使用SystemJS，则可以使用
这里有一个plunker演示了这个功能。应用程序元素是通过按钮点击事件处理程序创建、附加和初始化的。 更新 如果您正在使用Webpack并且取决于您的构建/捆绑过程，您可以使用此问题中的模式动态加载主要的转译/捆绑JS文件以避免错误。如果您正在使用
希望这能帮到您！
document.createElement()动态创建元素，然后使用appendChild()附加，然后调用System.import()来初始化应用程序。这假定所有必要的应用程序资产和SystemJS配置已经被加载：
HTML
<body>
<div id="app"></div>
<button type="button" id="foo">Click Me</button>
<script src="app.js"></script>
</body>
JS
(function() {
var button = document.getElementById('foo');
var container = document.getElementById('app');
button.addEventListener('click', function() {
var myApp = document.createElement('my-app');
myApp.textContent = 'Loading...';
container.appendChild(myApp);
System.import('app')
.catch(console.error.bind(console));
});
})();
这里有一个plunker演示了这个功能。应用程序元素是通过按钮点击事件处理程序创建、附加和初始化的。 更新 如果您正在使用Webpack并且取决于您的构建/捆绑过程，您可以使用此问题中的模式动态加载主要的转译/捆绑JS文件以避免错误。如果您正在使用
@angular/cli，这可能更加困难，因为生成的文件具有诸如main.97e5159ded9c783f627a.bundle.js之类的标识符。希望这能帮到您！
- Alexander Staroselsky
1
以下是如何实现的方法。首先创建一个根应用程序模块，并在declarations和entryComponents中声明您的根组件。 不要将其添加到bootstrap组件中。然后在模块类上定义ngDoBootstrap方法，让Angular知道您将自己引导应用程序。在此方法内部获取对ApplicationRef的引用，然后在时机成熟时，只需调用bootstrap并传递AppComponent类引用即可。以下是代码：
@NgModule({
imports: [BrowserModule],
declarations: [AppComponent],
entryComponents: [AppComponent]
})
export class AppModule {
ngDoBootstrap(app: ApplicationRef) {
// delay bootstrap by 3 seconds
setTimeout(() => {
app.bootstrap(AppComponent)
}, 3000);
}
}
基本上，当你使用指定了
bootstrapComponents的bootstrappModule(AppModule);调用时，Angular在幕后做了这件事情。阅读如何手动引导一个Angular应用程序以获取更多详细信息。
- Max Koretskyi
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接