小编yur*_*zui的帖子

我试图在Angular中实现类似委托模式的东西.当用户点击a时nav-item,我想调用一个函数然后发出一个事件,而该事件又由一些其他组件监听事件来处理.

这是场景:我有一个Navigation组件:

import {Component, Output, EventEmitter} from 'angular2/core';

@Component({
    // other properties left out for brevity
    events : ['navchange'], 
    template:`
      <div class="nav-item" (click)="selectedNavItem(1)"></div>
    `
})

export class Navigation {

    @Output() navchange: EventEmitter<number> = new EventEmitter();

    selectedNavItem(item: number) {
        console.log('selected nav item ' + item);
        this.navchange.emit(item)
    }

}

这是观察组件:

export class ObservingComponent {

  // How do I observe the event ? 
  // <----------Observe/Register Event ?-------->

  public selectedNavItem(item: number) {
    console.log('item index changed!');
  }

}

关键问题是,如何让观察组件观察相关事件？

我在指令中使用hostlistener来检测"blur" - 和"keyup"-events.现在我需要检测指令所在的input-element的变化.我试过了

@HostListener('change', ['$event'])

但它不会发射.

有没有"改变" - 事件？我还读过,应该有一个"输入" - 事件,但这也不会触发.

所以,我的问题是:是否有可以使用的可用事件列表？

我搜索过谷歌:

https://www.google.de/search?q=angular+2+list+of+hostlistener+events

和角度文件:

https://angular.io/api/core/HostListener

但没有找到任何东西.

我'question1'在表单对象中有一个名称的表单控件,parentForm我已按以下方式订阅它.

它有两个选项的单选按钮Yes和No,当我选择No,我得到Yes,当我选择Yes它的一个No.

this.parentForm.controls['question1'].valueChanges.subscribe(
  (selectedValue) => {
    // If option `No is selected`
    console.log(selectedValue);  // displays No. OK
    console.log(this.parentForm.value['question1']);  // displays Yes. Problem is here
  }
);

selectedValue变量具有正确的值,但如果我这样做,console.log(this.parentForm.value['question1']则给出前一个值.

我试图setTimeout()在检索之前输入一个值this.parentForm.value['question1'],它只是工作正常.

setTimeout(() => {
  console.log(this.parentForm.value['question1']); // gives the correct value.
}, 500);

但我的问题是,为什么parentForm在控件的值发生变化时不会更新,而且我只是在更改值后才检索其值.

注意:我不想观察parentForm.valueChanges,而不是我的要求.

尝试检查空数组时出错.我试过用:

情况1:通过初始化为数组

expect(fixture.componentInstance.dataSource).toBe([]);

情况2:通过初始化为数组

let expectedAry = new Array;
expect(fixture.componentInstance.dataSource).toBe(expectedAry);

两种情况都有相同的错误:

Expected [  ] to be [  ].

阵列也可以通过它们的长度来检查,以下工作正常

expect(fixture.componentInstance.dataSource.length).toEqual(0); 

0 length是一个选项,但不确定这是否是检查数组是否为空的正确方法.我们有更好的选择来检查数组是否为空？

我有一个包含一堆控件的大表单。在这个表单中，我有一组表单组，它们是我的“规则”。

我需要添加更改规则顺序的功能，不仅是它的值，还有它在 DOM 中的可视位置。

这是我的设置：

这些规则中的每一个都是具有自己的表单组等的组件。它们最初显示的顺序基于它们当前存储的处理顺序值。

在每条规则下方，我都有一个按钮来向上或向下移动规则，这正是我正在处理的。

对于响应式表单，表单组的索引是否决定了它在组件 UI 中的位置？例如，如果我想将规则向上移动，我是否可以将该表单组索引更改为currentIndex-1或者将上面的规则+1更改为以更改位置？

我的目标是能够在 UI 上上下移动这些组件。由于此页面上的规则数量，我试图远离拖放库。

更新：

这是我的设置的一个plunker：

https://plnkr.co/edit/S77zywAa7l900F0Daedv?p=preview

我正在开发一个ng2应用程序,我正在努力解决问题.我建立一个日历,您可以选择一个日期范围,我需要作出反应上click与mouseenter/mouseleave上一天的细胞活动.所以我有一个像这样的代码(简化):

calendar.component.html

<month>
    <day *ngFor="let day of days" (click)="handleClick()" 
         (mouseenter)="handleMouseEnter()" 
         (mouseleave)="handleMouseLeave()" 
         [innerHTML]="day"></day>
</month>

但是这给了我数百个独立的事件监听器在浏览器的内存中(每天的单元格获得3个事件监听器,我一次最多可以显示12个月,因此它将超过1k的监听器).

因此,我希望使用名为"事件委托"的方法"正确的方式".我的意思是,在父组件(month)上附加一个click事件,当它收到一个click事件时,只需检查它是否在Day组件上发生- 然后我就会对这个点击作出反应.当你传递参数时,像jQuery这样的东西在on()方法中selector.

但我是通过在处理程序代码中原生地引用DOM元素来实现的:

month.component.ts

private handleClick(event) {
    if (event.target.tagName === 'DAY') {
        // handle day click
    } else {
        // handle other cases
    }
}

我的同事拒绝了我的想法,因为 - 正如他们所说的那样 - "在NG2中必须有一种更简单,更恰当的方法来处理这个问题;就像在jQuery中一样.此外,它在这里失控 - 你对Day的点击做出反应在月的代码中."

所以,我的问题是,有更好的方法吗？或者我是否正在尝试解决一个我不应该再费心解决的问题,因为用户的设备每天都会获得越来越多的内存/处理能力？

提前致谢!

我有以下组件:

@Component({
    selector: 'pc-radio-button',
    templateUrl: './radio-button.component.html',
    providers: [
        {provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => FieldRadioButtonComponent), multi: true}
    ]
})
export class RadioButtonComponent implements ControlValueAccessor {
    ...
}

我可以通过这些输入分配和更改值:

<pc-radio-button [formControl]="formControl"></pc-radio-button>
<pc-radio-button [formControlName]="inputControlName"></pc-radio-button>

但是我需要组件可以直接访问指定的formControl,因为我需要根据其状态添加样式.

通过创建@Input()formControl并不能解决问题.因为它不包括通过formControlName分配表单控件的情况.

我在点击mat-nav-list项目时尝试触发打开菜单.

HTML

<mat-nav-list>
    <mat-list-item (click)="onOpenMenu(menu)" *ngFor="let i of data">
        <div mat-line>
            {{ i.name }}
        </div>
        <p mat-line>
            {{ i.email }}
        </p>
        <button mat-icon-button [matMenuTriggerFor]="menu">
            <mat-icon>more_vert</mat-icon>
        </button>
    </mat-list-item>
    <mat-menu #menu="matMenu">
        <button mat-menu-item>View profile</button>
        <button mat-menu-item>Add contact</button>
    </mat-menu>
</mat-nav-list>

TS

onOpenMenu(menu: any): void {
   // menu doesn't have any openMenu() function 
   // which is of course not a trigger object but a menu itself.
   console.log(menu);
}

我一直试图在github上看这个问题,这更接近我的情况.但在我的情况下,我有一个动态的项目列表,我想每次点击打开一个菜单.

DEMO

我知道如果我有像product.id == 1这样的东西？东西:不是东西.这意味着如果id = 1,则选择"stuff".如果没有,那么选择"不是东西".以下是什么意思:

product?.id.name

我正进入(状态

"没有e的提供者!"

在生产模式下运行Angular应用程序时出错.在开发模式下,它工作正常.我收到以下错误:

我试过ng build -aot现在得到错误

"错误:没有NgForm的提供者!"

有没有人知道如何解决它？

以下是我使用的package.json文件:

{
  "name": "app-web",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "hmr": "ng serve --hmr -e=hmr",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.2.4",
    "@angular/common": "^4.2.4",
    "@angular/compiler": "^4.2.4",
    "@angular/core": "^4.2.4",
    "@angular/forms": "^4.2.4",
    "@angular/http": "^4.2.4",
    "@angular/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/router": "^4.2.4",
    "@types/bootstrap-datepicker": "0.0.10",
    "@types/d3": "^4.10.0",
    "@types/jquery": "^3.2.11",
    "bootstrap": "^3.3.7",
    "bootstrap-datepicker": "^1.7.1",
    "core-js": "^2.4.1",
    "d3": "^4.10.2",
    "file-saver": …