如何使用Angular 4使我的应用程序更具可扩展性和灵活性？

Question

我有一个类似Plunker的东西，我的原始代码有一些更改，例如键盘事件和鼠标事件。

该代码仅作为单个组件工作，我的问题是我必须创建许多具有不同数据的Card-List，但是我需要同时创建另一个Cards-Something，其中包含与“卡片清单”，但具有不同的数据和样式。

在我的情况下，它将类似于“ User-Card-List ”，与“ Notifications-Cards ”和“ Person-Card-List ”不同，但是所有卡都将具有类似于“ Global Card-Container-Component ，其中包含一个Service来获取鼠标和键盘事件。

我创建了MouseService和KeyboardService

根据该 @HostListener好像它是不可能在服务中使用它。

所以我用它来获取例如Ctrl Keyboard Events。

@Injectable()
export class KeyboardService {

  public isCtrlKeyDown = false;

  constructor() {
    window.addEventListener('keydown', (event) => {
      if (event.keyCode === 17 && !this.isCtrlKeyDown) {
        this.isCtrlKeyDown = true;
      }
    });

    window.addEventListener('keyup', (event) => {
      if (event.keyCode === 17 && this.isCtrlKeyDown) {
        this.isCtrlKeyDown = false;
      }
    });
  }

}

现在，我需要知道如何为更可扩展和灵活的应用程序制作像Plunker这样的东西，而且我不确定Angular Projection是否正是我所需要的，因为我将在同一Web View中使用2个或3个不同的卡片组件（通知卡将在所有视图中与另一个卡组件一起使用）。

希望您能理解我=）谢谢。

Answer 1

这个答案与HostListener的关系不大。

• 我认为下面的代码本身并不能完全回答您的问题，但是，如果将Angular类的关注点分为“智能”和“代表性”组件，它也可能有助于您组织代码库。 它似乎符合您的整体需求。
• 最后有一些脚注可满足您其他需求。

这是要点：

smart.component.ts

// Smart because it's aware of service layer //
import {Component,OnInit} from '@angular/core';
import {Domain} from '../shared/model/domain';
import {DomainService} from '../services/domain-service';
import {Observable} from 'rxjs';
@Component({
    selector:    'smart-component',
    templateUrl:'./smart-component.html',
    stylesUrl: ['./smart-component.css']
})
export class SmartComponent implements OnInit {
   domains$ : Observable<Domain[]>; // define data stream view needs.
   constructor(private domainService : DomainService) {}

   ngOnInit {
     this.domains$ = this.domainService.findAllDomains();
   }
}

smart.component.html

<presentation-list [domains]="domains$ | async"></presentation-list>

Presentation-component.ts

// handles layout only //
import {Component,Input} from '@angular/core';
import {Domain} from '../shared/model/domain';
@Component({
    selector:    'presentation-list',
    templateUrl:'./presentation-component.html',
    stylesUrl: ['./presentation-component.css']  
})
export class PresentationComponent {
  @Input()
  domains: Domain[];
  // see smart.component.html calling presentation-list [domains]
  // presentation-list is the selector of this class.
}

Presentation-component.html

<table *ngIf="domains else loadingDomain">
  <tr *ngFor="let domain of domains">
    <td>
        {{domain.field}}
    </td>
  </tr>
</table>
<template #loadingDomain>
  <div>Loading data ...</div>
</template>

---

另一件事是：

1. 为方法定义一个公共接口，您需要不同域类的服务。
2. 编写为您的域类实现通用接口的服务。

对于“数据更改”，我会一直在思考：

• ReactiveForms 。 我对设置项目以在此处使用它们的其他方面提供了一些提示
• ChangeDetectionStrategy.onPush 。

我对内容投影和<ngContent></ngContent>所做的评论仍然适用。 也许有一种方法可以定义可以交换不同实现的指令。 如果有人为此加上两分钱，这对我也很有用。