现有网站+ angular2与可选组件集成

Question

我有现有的网站，我有angular2（cli main.js）。

我已经为主要组件添加了主要的<app></app>标签。

现在我有另一个组件，即stats组件。它只会显示用户是否已登录。

问题是，如果我不在<app-stats></app-stats>组件标签内添加<app></app>，那么它不会渲染它。

如何在不与主应用程序组件绑定的情况下使stats组件成为bootstrap？所以它可以放在html页面的任何地方，而不是在<app></app>内部，也可以是可选的，如果用户没有登录，那么它将放在html代码中。

1. 在html页面上自由添加<app-stats></app-stats>
2. <app-stats></app-stats>（可选 - 仅在用户从服务器端脚本“php”登录时才会添加） - 我只想在这里提及它，因为目前如果我不添加此标签，那么我会收到错误“缺少组件.... “

Answer 1

如果您使用的是Angular RC5，则可以引导多个组件并使用。

  @Component({
    selector: 'app',
    template: `app`,
  })
  export class App {
    constructor() {}
  }

  @Component({
    selector: 'app-status',
    template: `app-status`,
  })
  export class AppStatus {
   constructor() {}
  }

  @NgModule({
   imports: [ BrowserModule ],
   declarations: [ App ],
   bootstrap: [ App, AppStatus ]
  })
  export class AppModule {}

这是Plunker!

更新

您可以尝试下面在bootstrap数组中动态添加组件。

在你的app模块打字稿中

let login = require('login.js');

let bootstrapcomponents = [];

if(login.isLoggedIn){
  bootstrapcomponents = [AppComponent, AppStatsComponent]
}
else{
 bootstrapcomponents = [AppComponent]
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: bootstrapcomponents 
})
export class AppModule {}

现在关键是当你在登录之前执行System.import('<main file which bootstraps your appmodule>')时，应该已经加载了login.js文件并且必须设置了值。

您可以创建一个全局变量以及可以设置登录信息的窗口对象，该对象可以在AppModule中使用。

希望这可以帮助！！