Jhipster 4如何在主屏幕上放置实体组件(列表) [英] Jhipster 4 How to put entity component (list) on home screen
问题描述
我正在将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
正在加载十大客户...
Loading top 10 customers...
您能帮我发现我在做什么错吗? 我认为如果将此组件添加到主页就足够了.
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位居第三 基于此示例组件层次结构
Updated I asume I'm on the 3rd level of components; AppComponent, HomeComponent and CustomerComponent is 3rd Based 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.tsentity.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 {
}
最后一步是将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如何在主屏幕上放置实体组件(列表)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
