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

Question

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

假设我有两个实体:具有一对多关系的客户和任务。

我想在主屏幕上显示客户列表(前 10 名)。接下来我想添加属于他的所有任务的客户详细信息 View 列表。

我更新了 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>

在这些变化之后我只看到了

Loading top 10 customers...

你能帮我找出我做错了什么吗？我想如果我把这个组件添加到主页就足够了。

已更新我假设我在组件的第三级； AppComponent、HomeComponent 和 CustomerComponent 排名第三基于图表 Sample component hierarchy

Answer 1

您尝试使用此代码完成的是渲染组件 <jhi-customer>作为主页组件的嵌套组件(要列出前 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 {
}

解释为 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 模块的分步教程。