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> 

我只看到

載入中頂部10個客戶...

你能幫我找到我做錯了什麼嗎？ 我認爲如果我把這個組件添加到主頁就足夠了。

更新 我asume我在第三級的組件; AppComponent，HomeComponent和CustomerComponent基於此Sample component hierarchy

Answer 1

你想使用此代碼來完成什麼圖是第3 被渲染組件<jhi-customer>作爲家庭成分的嵌套的組件（列出前10名顧客，你可能需要額外的邏輯，取決於「頂部」意味着什麼）。

您可以通過使用模塊文件並通過導出/導入語句更改其可見性來完成此操作。 這些模塊出現在Angular RC6中，並要求您定義模塊之間的可訪問性規則。

假設你已經定義並生成以下JDL模型：

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例如：

@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

的最後一步是在home.module.ts導入JhipsterEntityModule：

@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模塊。