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位客户......

你能帮忙找一下我做错了什么吗？我认为如果我将这个组件添加到主页就会有所帮助。

更新我认为我是第三级组件; AppComponent，HomeComponent和CustomerComponent排名第3 基于此Sample component hierarchy

的图表

Answer 1

您尝试使用此代码完成的任务是将组件<jhi-customer>渲染为主组件的嵌套组件（列出前10位客户，您可能需要额外的逻辑，具体取决于“顶部”平均值）。

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

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

1 个答案: