Jhipster 4如何将实体组件(列表)放在主屏幕上

Question

我正在使用Jhipster 4和Angular 2.0来创建应用程序.我是所有这些员工的新手.

假设我有两个实体:Customer和Task,关系一对多.

我想在主屏幕上有客户名单(前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-customer

<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我在组件的第3级; AppComponent,HomeComponent和CustomerComponent是第3个基于此Sample组件层次结构的图表

Answer 1

您尝试使用此代码完成的任务是将组件呈现<jhi-customer>为 home 组件的嵌套组件（要列出前 10 位客户，您可能需要额外的逻辑，具体取决于“top”的含义）。

您可以通过使用模块文件并通过导出/导入语句更改其可见性来实现此目的。这些模块出现在 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 {
}

正如这里所解释的

最后一步是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 部分，它将带您进入处理新 Angular 模块的分步教程。