Question

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

代码作为单个组件工作，我的问题是我必须创建大量具有不同数据的Card-List但我需要同时创建另一个Card-包含相同MouseEvents和Keyboard事件的东西而不是“卡片列表”，但具有不同的数据和样式。

在我的情况下，“User-Card-List”会与“Notifications-Cards”和“Person-Card-List”不同，但所有的卡片都会像一样全局 Card-Container-Component，其中包含Service以获取鼠标和键盘事件。

我创建了MouseService和KeyboardService

根据this @HostListener，似乎无法在服务中使用它。

所以我用这个来获取Ctrl键盘事件。

@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视图2或3个不同的卡组件（通知卡将在所有视图中与另一个卡组件一起使用）。

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

Answer 1

这个答案与HostListener没有多大关系。

我不认为下面的代码本身完全回答了你的问题，但如果你将Angular类的关注点分成'smart'和'presentational'组件，它也可能有助于你组织你的代码库。它似乎符合您的整体需求。
最后有一些脚注可以解决您需要的其他部分。

这是它的要点：

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>

呈现-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.
}

呈现-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>

另一件事是：

定义方法的通用接口，不同域类的服务需要。
编写实现域类通用接口的服务。

对于“数据更改”，我一直在想：

ReactiveForms。我提供了一些关于设置项目的其他方面的提示here
ChangeDetectionStrategy.onPush。

有关内容预测的评论和我提出的<ngContent></ngContent>仍然适用。也许有一种方法来定义交换不同实现的指令。如果有人用这两美分加上这个，那对我来说也是有用的。

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

1 个答案: