Question

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

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

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

问题是，如果我不在<app-stats></app-stats>组件标记内添加<app></app>，那么它就不会呈现它。

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

在html页面上自由添加<app-stats></app-stats>
<app-stats></app-stats>（可选 - 只有在用户从服务器端脚本登录时才会添加＃34; php＆＃34;） - 我只想在这里提及它，因为目前我不添加此标签，然后我得到错误＆＃34;缺少组件....＆＃34;

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中使用。

希望这会有所帮助!!

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

1 个答案: