相关疑难解决方法(0)

我对在Angular中传递数据有疑问.

首先,我没有结构 <parent><child [data]=parent.data></child></parent>

我的结构是

<container>
  <navbar>
    <summary></summary>
    <child-summary><child-summary>
  </navbar>
  <content></content>
</container>

所以,在<summary />我有一个选择,确实发送值<child-summary />和<content />.

使用(更改)内部<summary />组件可以很好地触发OnSelect方法.

于是,我试着用@Input,@Output和@EventEmitter指令,但我看不出如何检索事件作为组件的@input,除非去父/子模式.我创建的所有例子都有组件之间的关系.

编辑:BehaviorSubject不工作的示例(API的所有连接服务都运行良好,只有在开始时才会触发observable,但是当select的值发生更改时不会触发)

shared service = company.service.ts(用于检索公司数据)

import { Injectable } from '@angular/core';
import { Headers, Http, Response } from '@angular/http';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/toPromise';

@Injectable()
export class SrvCompany {

    private accountsNumber = new BehaviorSubject<string[]>([]);
    currentAccountsNumber = this.accountsNumber.asObservable();

    changeMessage(accountsNumber: …

我正在开发一个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的点击做出反应在月的代码中."

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

提前致谢!

我的(v7) 项目中有一些同级组件和 a DataService，我Angular将方法称为以下场景：

TicketComponent在via中添加ticket和callsreloadTickets方法TicketListComponent，类似地在via中FileComponent添加file和callsreloadFiles方法，如下所示：FileListComponentDataService

数据服务.ts：

export class DatasService {

    private eventSubject = new BehaviorSubject<any>(undefined);

    getEventSubject(): BehaviorSubject<any> {
        return this.eventSubject;
    }

    reloadTickets(param: boolean) {
        this.eventSubject.next(param);
    }

    reloadFiles(param: any) {
        this.eventSubject.next(param);
    }
}

票务组件：

ngOnInit(): void {
    this.dataService.getEventSubject().subscribe((param: any) => {
        this.reloadTickets();
    });
}

文件组件：

ngOnInit(): void {
    this.dataService.getEventSubject().subscribe((param: any) => {
        this.reloadFiles();
    });
}

当我BehaviorSubject对这两种方法使用 single时，当调用其中一种方法时，会同时调用这两种方法。我的意思是，由于它们都通过 getEventSubject() 方法订阅，因此 reloadTickets() 方法也会触发 DataService 中的 reloadFiles()，因为它们都使用相同的主题 …