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

问题描述

我正在将Jhipster 4与Angular 2.0一起使用来创建应用程序.我是所有这些工作人员的新手.

I'm using Jhipster 4 with Angular 2.0 to create application. I'm newbie for all this staff.

比方说，我有两个实体:与一对多的客户和任务.

Let's say I have two entities: Customer and Task with relation one to many.

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

I would like to have list of customers (top 10) on home screen.As next I would like to add on customer detail view list of all tasks which belongs to him.

我已经更新了home.component.ts以添加 CustomerComponent

I've updated home.component.ts to add 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

And in home.component.html I added 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>

这些更改之后，我只能看到

After those changes I see only

您能帮我发现我在做什么错吗?我认为如果将此组件添加到主页就足够了.

Could you please help find what I'm doing wrong?I thought that it will be enought if I add this component to home page.

已更新我假设我处于组件的第3层. AppComponent，HomeComponent和CustomerComponent位居第三基于此示例组件层次结构

UpdatedI asume I'm on the 3rd level of components; AppComponent, HomeComponent and CustomerComponent is 3rdBased on diagram from this Sample component hierarchy

推荐答案

您要使用此代码完成的工作是将组件<jhi-customer>渲染为home组件的嵌套组件(列出您所获得的前10位客户)可能需要其他逻辑，具体取决于顶部"的含义.

What you're trying to accomplish with this code is rendering the component <jhi-customer> as a nested component of the home component (to list the top 10 customers you might require additional logic, depending on what "top" would mean).

您可以通过使用模块文件并通过export/import语句更改其可见性来做到这一点.这些模块出现在Angular RC6中，要求您定义模块之间的可访问性规则.

You can do so by using the modules files and changing their visibility through exports/imports statements.The modules appeared in Angular RC6 and require you to define the accessibility rules between modules.

假设您已经定义并生成了以下JDL模型:

Suppose you have defined and generated the following JDL model:

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
• entity.module.ts

在customer.module.ts中，按以下方式导出CustomerComponent:

In customer.module.ts, export CustomerComponent, as such:

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

在entity.module.ts中，导出结果模块JhipsterCustomerModule:

In entity.module.ts, export the resulting module JhipsterCustomerModule:

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

如此处所述a>

最后一步是将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并重新导出了整个模块，但是您可能会发现更适合您需要的导入/导出范围.

Then the component will be rendered appropriately.Here, I exported CustomerComponent and re-exported the full module but you might find a more precise scoping of imports/exports suitable for your needs.

如果您正在寻找参考，请查看 NgModule部分，它将带您逐步学习如何处理新的Angular模块.

If you're looking for the reference, have a look at NgModule section, which will take you to a step-by-step tutorial for dealing with the new Angular modules.

这篇关于Jhipster 4如何在主屏幕上放置实体组件(列表)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！