Существующий сайт + интеграция углов2 с дополнительным компонентом

Question

У меня есть существующий сайт, и у меня есть angular2 (cli main.js) на нем.

У меня есть основной <app></app> тег добавлен для основного компонента.

Теперь у меня есть еще один компонент, который является компонентом статистики. он будет отображаться только в том случае, если пользователь вошел в систему.

Проблема в том, что если я не добавляю <app-stats></app-stats> внутри тега компонента <app></app>, тогда он не будет его отображать.

Как я могу сделать компонент статистики загрузочным, без привязки к основному компоненту приложения? Таким образом, его можно разместить где угодно на html-странице, не будучи внутри <app></app>, а также его необязательно, если пользователь не зарегистрирован, тогда он будет помещен в код html.

1. Произвольно добавить <app-stats></app-stats> на HTML странице
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!

Update

вы можете попробовать ниже динамического добавления компонентов в начальной загрузки массива.

в вашем приложении модуля машинописи

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.

Надеюсь, что это поможет!