Jhipster 4 Как разместить компонент сущности (список) на главном экране

Question

Я использую Jhipster 4 с Angular 2.0 для создания приложения. Я новичок для всех этих сотрудников.

Предположим, у меня есть два объекта: Клиент и Задача с отношением один к многим.

Я бы хотел иметь список клиентов (вверху 10) на главном экране. В качестве следующего я хотел бы добавить в список подробных сведений о пользователе, который принадлежит ему.

Я обновил home.component.ts добавить CustomerComponent

import { Component, OnInit } from '@angular/core'; 
import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap'; 
import { EventManager, JhiLanguageService } from 'ng-jhipster'; 

import { Account, LoginModalService, Principal } from '../shared'; 

import { CustomerComponent, CustomerService, Customer } from '../entities/customer/'; // <--- 

@Component({ 
    selector: 'jhi-home', 
    templateUrl: './home.component.html', 
    styleUrls: [ 
     'home.css' 
    ], 
    entryComponents: [ 
     CustomerComponent // <--- 
    ], 

}) 
export class HomeComponent implements OnInit { 
    account: Account; 
    modalRef: NgbModalRef; 

    constructor(
     private jhiLanguageService: JhiLanguageService, 
     private principal: Principal, 
     private loginModalService: LoginModalService, 
     private eventManager: EventManager 
    ) { 
     this.jhiLanguageService.setLocations(['home']); 
    } 

    ngOnInit() { 
     this.principal.identity().then(
      (account) => { 
      this.account = account; 
     }); 
     this.registerAuthenticationSuccess(); 
    } 

    registerAuthenticationSuccess() { 
     this.eventManager.subscribe('authenticationSuccess', (message) => { 
      this.principal.identity().then((account) => { 
       this.account = account; 
      }); 
     }); 
    } 

    isAuthenticated() { 
     return this.principal.isAuthenticated(); 
    } 

    login() { 
     this.modalRef = this.loginModalService.open(); 
    } 
} 

И в home.component.html я добавил Jhi-клиента

<div class="row"> 
    <div class="col-md-3"> 
     <span class="hipster img-fluid img-rounded"></span> 
    </div> 
    <div class="col-md-9"> 
     <h1 class="display-4" jhiTranslate="home.title">Welcome, Java Hipster!</h1> 
     <p class="lead" jhiTranslate="home.subtitle">This is your homepage</p> 

     <div [ngSwitch]="isAuthenticated()"> 
      <div class="alert alert-success" *ngSwitchCase="true"> 
       <span *ngIf="account" jhiTranslate="home.logged.message" 
        translateValues="{username: '{{account.login}}'}"> You are logged in as user "{{account.login}}". </span> 
      </div> 


      <div *ngSwitchCase="true"> 
       <jhi-customer>Loading top 10 customers...</jhi-customer> 
      </div> 

     </div> 
    </div> 
</div> 

После этих изменений я только см. только

Загрузка top 10 клиентов ...

Не могли бы вы помочь найти то, что я делаю неправильно? Я думал, что этого будет достаточно, если я добавлю этот компонент на домашнюю страницу.

Обновлено I amume Я нахожусь на 3-м уровне компонентов; AppComponent, HomeComponent и CustomerComponent является третьим на основе диаграммы из этого Sample component hierarchy

Answer 1

То, что вы пытаетесь достичь с помощью этого кода делает компонент <jhi-customer> в виде вложенного компонента домашнего компонента (в списке 10 лучших клиентов вы можете требуют дополнительной логики, в зависимости от того, что означало бы «верх».

Вы можете сделать это, используя файлы модулей и изменив их видимость с помощью инструкций экспорта/импорта. Модули появились в угловом RC6 и требуют определения правил доступа между модулями.

Предположим, вы определили и создали следующий ЛЗЕ модель:

entity Customer { 
    name String required, 
} 

entity Task { 
    name String required 
} 

relationship OneToMany { 
    Customer{tasks} to Task{customer(name)} 
} 

Тогда вы будете в конечном итоге с:

• customer.module.ts
• entity.module.ts

В customer.module.ts, экспорт CustomerComponent, as такие как:

@NgModule({ 
    imports: [ 
     JhipsterSharedModule, 
     RouterModule.forRoot(ENTITY_STATES, { useHash: true }) 
    ], 
    exports: [ 
     CustomerComponent 
    ], 
    declarations: [...], 
    entryComponents: [...], 
    providers: [...], 
    schemas: [...] 
}) 
export class JhipsterCustomerModule {} 

В объекте entity.module.TS, экспортировать полученный модуль JhipsterCustomerModule:

@NgModule({ 
    imports: [ 
     JhipsterCustomerModule, 
     JhipsterTaskModule 
    ], 
    exports: [ 
     JhipsterCustomerModule 
    ], 
    declarations: [], 
    entryComponents: [], 
    providers: [], 
    schemas: [CUSTOM_ELEMENTS_SCHEMA] 
}) 
export class JhipsterEntityModule { 
} 

как объяснено here

Последний шаг импортировать JhipsterEntityModule в home.module.ts:

@NgModule({ 
    imports: [ 
     JhipsterSharedModule, 
     JhipsterEntityModule, 
     RouterModule.forRoot([HOME_ROUTE], {useHash: true}), 
    ], 
    declarations: [ 
     HomeComponent 
    ], 
    entryComponents: [], 
    bootstrap: [], 
    providers: [], 
    schemas: [CUSTOM_ELEMENTS_SCHEMA] 
}) 
export class JhipsterHomeModule { 
} 

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

Если вы ищете ссылку, взгляните на NgModule section, в которой вы найдете пошаговое руководство по работе с новыми модулями Angular.