仅在特定页面上使用 Angular2 组件答案

【问题标题】：Use Angular2 component on a specific page only仅在特定页面上使用 Angular2 组件
【发布时间】：2016-01-12 21:50:50
【问题描述】：

我必须使用 laravel 5 提供的两个页面

本地主机/家庭

localhost/登录

在我的主页中，我有一个名为 <my-app></my-app> 的 angular2 组件，并且工作正常。

但是当我访问不包含任何组件的登录页面时，angular 会抛出一个错误“例外：选择器“my-app”不匹配任何元素”。访问登录页面时如何解决此问题。

我在我的主布局页面中完成了 Angular 2.0 Beta 的所有引导，这使得引导对两个页面都可用。

【问题讨论】：

如果您从 /home 复制并粘贴组件以进行登录，请检查您的选择器属性，确保您更改了它。 @Component({ selector: 'my-app', template:`
{{title}}
` })

【解决方案1】：

我花了几个小时寻找解决方案。对我有用的解决方案在 main.ts 中：

if (document.querySelector("homeSelector")) {
    platform.bootstrapModule(HomeModule);
}

其他页面和其他模块也是如此。

【讨论】：

【解决方案2】：

这意味着您使用my-app 选择器声明了一个组件，但您没有在任何地方使用<my-app>。

【讨论】：

【解决方案3】：

如果您启动应用程序，Angular2 至少需要一个组件。解决方法可能类似于以下内容。

if(window.location.pathname == '/home') {
   bootstrap(myapp); // or your initialization
}

【讨论】：

{{title}}