标签: angular9

我正在使用 Angular (9) 驱动的 Bootstrap (6.1.0) TypeAhead 并定义其搜索函数，如下所示：

search = (text$: Observable<string>) => {
    return text$.pipe(
      debounceTime(200),
      distinctUntilChanged(),
      // switchMap allows returning an observable rather than maps array
      switchMap((searchText) => {
        if (!searchText || searchText.trim().length == 0) {
          // when the user erases the searchText
          this.dealerRepUserID = 0;
          this.dealerRepChanging.emit(this.dealerRepUserID);
          return EMPTY;
        }
        else if (this.dealerID == this.hostOrganizationID) {
          // get a list of host reps
          return this.myService.getHostRepsAutoComplete(searchText, this.includeInactive);
        } else {
          // get a list of dealer reps
          return this.myService.getDealerReps(this.dealerID, …

最近我在阅读 Nebular（一个 Angular ui 框架）的源码，我对以下代码有疑问：

@Component({
  selector: '[nbMenuItem]',
  templateUrl: './menu-item.component.html',
  animations: [
    ...
  ],
})
export class NbMenuItemComponent implements DoCheck, AfterViewInit, OnDestroy {
  @Input() menuItem = <NbMenuItem>null;

  @Output() hoverItem = new EventEmitter<any>();
  @Output() toggleSubMenu = new EventEmitter<any>();
  @Output() selectItem = new EventEmitter<any>();
  @Output() itemClick = new EventEmitter<any>();

这应该是一个组件，它的使用方法如下：

@Component({
  selector: 'nb-menu',
  styleUrls: ['./menu.component.scss'],
  template: `
    <ul class="menu-items">
      <ng-container *ngFor="let item of items">
        <li nbMenuItem *ngIf="!item.hidden"
            [menuItem]="item"
            [class.menu-group]="item.group"
            (hoverItem)="onHoverItem($event)"
            (toggleSubMenu)="onToggleSubMenu($event)"
            (selectItem)="onSelectItem($event)"
            (itemClick)="onItemClick($event)"
            class="menu-item">
        </li>
      </ng-container>
    </ul>
  `,
})
export class NbMenuComponent …

我正在使用 Angular 9 mat-chips，我想知道如何停止在输入中添加新值，而只允许添加自动完成列表中的项目，即输入不在自动完成列表中的“abc”，并且按 Enter 键会在输入中添加“abc 作为芯片”，需要避免仅添加自动完成列表中的值。另外，我想知道如何停止在角垫片中添加重复项，即如果我已经添加了柠檬柠檬不应该添加到垫片列表中，并且也应该从自动完成列表中删除。

以下是代码：

芯片自动完成.component.ts

@Component({
  selector: 'chips-autocomplete-example',
  templateUrl: 'chips-autocomplete-example.html',
  styleUrls: ['chips-autocomplete-example.css'],
})

export class ChipsAutocompleteExample {
  visible = true;
  selectable = true;
  removable = true;
  separatorKeysCodes: number[] = [ENTER, COMMA];
  fruitCtrl = new FormControl();
  filteredFruits: Observable<string[]>;
  fruits: string[] = ['Lemon'];
  allFruits: string[] = ['Apple', 'Lemon', 'Lime', 'Orange', 'Strawberry'];

  @ViewChild('fruitInput') fruitInput: ElementRef<HTMLInputElement>;
  @ViewChild('auto') matAutocomplete: MatAutocomplete;

  constructor() {
    this.filteredFruits = this.fruitCtrl.valueChanges.pipe(
        startWith(null),
        map((fruit: string | null) => fruit ? this._filter(fruit) : this.allFruits.slice()));
  }

  add(event: MatChipInputEvent): void { …

我从共享文件夹创建了一个自定义管道，以便在组件 1（示例：Applicant 组件）HTML 中使用它，因此我将其导入到ApplicantModule中。我的目标是让这个管道在组件 2 中可重用（例如：Applicant 组件），因此我还将这个自定义管道导入到组件的 2 模块中，即CoApplicantModule。编译后我得到控制台错误。

当我尝试将自定义管道的导入语句移至SharedModule并尝试组件 2 中的管道时，出现控制台错误。

我想请求你的帮助，因为找不到这个错误，因为我认为它会工作，因为SharedModule也被导入了ApplicantModule和CoApplicantModule

我想onblur在我的 Angular 9 应用程序中设置一个事件处理程序，以便在有人离开页面时处理。我的相关页面被映射到具有以下内容的单个组件......

export class HotComponent implements OnInit {
  ...

  onBlur(): void {
    console.log("on blur called !!!");
  }

在模板中，我设置了这个...

<div (blur)="onBlur()">
  <div>
    ...
  </div>
</div>

但是，当我离开加载此页面的浏览器窗口并返回时，我注意到onblur处理程序尚未被调用。在 Angular 9 中实现onblur页面事件处理程序的正确方法是什么？

我想配置我的 Angular 9 应用程序以不同方式显示组件，具体取决于某人是否使用移动设备来观看它。当我用 Python 构建模板时，有一个 user_agents 包，它允许我根据移动路径检测和提供不同的 HTML

{% load user_agents %}\n...\n{% if not request|is_mobile and not request|is_tablet %}\n            <td>{{ item.category }}</td>\n            <td><a href="{{ item.path }}">{{ item.title }}</a></td>\n            <td align="center">{{ item.created_on }}</td>\n{% else %}\n            <td>\n                <div>\n                    {{ item.category }} \xc2\xb7 {{ item.created_on_fmted }}\n                </div>\n                <div>\n                    <a href="{{ item.mobile_path }}">{{ item.title }}</a>\n                </div>\n            </td>\n{% endif %}\n

现在我正在 Angular 中构建，我的常规设备有以下垫子表

<mat-table #table [dataSource]="dataSource">\n\n    <ng-container matColumnDef="category">\n      <mat-header-cell *matHeaderCellDef> category </mat-header-cell>\n      <mat-cell *matCellDef="let item">{{ item.category.path }}</mat-cell>\n    </ng-container>\n\n    <ng-container matColumnDef="title">\n      <mat-header-cell …

升级到 Angular 9 后，我的一些服务扩展的抽象类会自动使用@injectableAngular 9 迁移指南中所写的装饰。

我的应用程序上的一切正常。

但是我不明白为什么抽象类必须被装饰，因为扩展它们的具体类确实有@injectable装饰器。

我还阅读了这个问题Angular library module injection service with abstract class并建议@injectable从抽象中删除。

那么我应该删除装饰器吗？

这只是将装饰器添加到我的摘要中的 Angular“错误”吗？

此外，我注意到@directive装饰器已添加到用于实现组件的其他抽象类中。

我已经使用指令来启用和禁用表单。这是在一个单独的打字稿文件中。代码如下： -

import { NgControl } from '@angular/forms';
import { Directive, Input } from '@angular/core';

@Directive({
    selector: '[disableControl]'
})
export class DisableControlDirective {
    @Input('disableControl') set disableControl( condition : boolean ) {
        const action = condition ? 'disable' : 'enable';
        this.ngControl.control[action]();
    }
    constructor (private ngControl : NgControl){}
}

HTML：-

<div class="card" *ngIf="commentsFormEnable">
    <div class="card">
      <h3 class="mb-0">
        <button class="btn  btn-primary btn-sm" aria-expanded="false">
          Comments
        </button>
      </h3>
      <form [formGroup]="commentsForm" data-target="comments" id="commentsForm" (ngSubmit)="onSubmit($event)">
        <div class="row">
          <div class="col">
            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <span class="input-group-text">Comments</span>
              </div> …

我正在尝试创建地图，正如我在其他网站和示例中看到的那样，每个人都可以通过鼠标单击和拖动来移动他们的地图。但是我的地图根本不会移动，有人知道我做错了什么吗？

这些是我正在使用的 components.ts 和 component.html 文件。我按照https://openlayers.org/en/latest/doc/tutorials/bundle.html 上的说明操作，没有安装 Parcel，因为我使用的是 angular。

地图组件.ts

ngOnInit(): void {
  this.mapInit();
  }

   mapInit() {
   var mousePositionControl = new MousePosition({
         coordinateFormat: createStringXY(4),
         projection: 'EPSG:4326',
         // comment the following two lines to have the mouse position
         // be placed within the map.
         className: 'custom-mouse-position',
         target: document.getElementById('mouse-position'),
         undefinedHTML: ' '
       });

          var source = new OSM();
          var overviewMapControl = new OverviewMap({
            layers: [
              new TileLayer({
                source: source
              })
            ]
          });

          this.map = new Map({
          target: 'map',
          interactions: defaultInteractions().extend([
              new …

我有一个通过 VegaEmbed ( https://github.com/vega/vega-embed )构建的 Angular 饼图组件，它使用 Vega 和 D3 作为底层图形依赖项。它通过提供标题和一些（键，值）对来呈现。我隔离了该组件，并修改了 main.ts 以从 Stackblitz 中运行 Jasmine 与您分享。在这个测试中，我正在检查饼图是否确实<text>为值“30%”呈现了 SVG标签 | “70%”与传奇“联合CEO/主席”| “单独的首席执行官/主席”。但是，它们似乎运行得太早了，而且 VegaEmbed+Vega+D3 仍在忙于构建 SVG。（我仅通过 Chrome 开发工具查看 DOM 就推断出要测试的内容）。

https://stackblitz.com/edit/angular-d3-pie-chart-unit-test

我已经尝试了一系列的事情：async, FakeAsync+ tick, jasmine.clock, 改变我的 Angular 组件中的 promises 逻辑等等......fixture.whenStable让我更近了一步，但texts声明的第 50 行仍然未定义。

我不知道 Vega、VegaEmbed 和 D3 的内部是如何工作的。如果这些库没有使用承诺，而是使用老式的回调，那么 Angular 的 Zones 可能无法在async?

让我有点困惑的是，console.log(texts);最终在控制台中显示了 4 个文本 SVG 元素的集合。却console.log(texts.length);显示0！

1. 怎么可能 ？
2. 我如何让我的测试代码等到 D3 完成绘制 SVG 的那一刻，expect然后才运行语句？