相关疑难解决方法(0)

我试图在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!');
  }

}

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

我已经在CustomHttp 中读取了Access EventEmitter Service等问题,其中用户在其服务中使用了EventEmitter,但是他在本评论中建议他 不要使用它,而是直接在他的服务中使用Observables.

我还阅读了这个 问题 ,解决方案建议将EventEmitter传递给子节点并订阅它.

我的问题是:我应该,还是不应该手动订阅EventEmitter？我该怎么用？

在Angular 2中有关于内存管理的任何特定缺陷,我应该知道吗？

管理组件状态以避免可能的泄漏的最佳实践是什么？

具体来说,我已经看到一些人在方法中取消订阅HTTP observablesngOnDestroy.我应该一直这样做吗？

在Angular 1.XI中,知道当a $scope被破坏时,其上的所有听众也会被自动销毁.Angular 2组件中的可观察量如何？

@Component({
  selector: 'library',
  template: `
    <tr *ngFor="#book of books | async">
        <td>{{ book.title.text }}</td>
        <td>{{ book.author.text }}</td>
    </tr>
  `
})
export class Library {
    books: Observable<any>;

    constructor(private backend: Backend) {
        this.books = this.backend.get('/texts'); // <-- does it get destroyed
                                                 //     with the component?
    }
};

我正在制作“跳转到内容”链接。链接在app.component 中，内容在login.component 中，还有目标。

我尝试了几种方法，但都没有奏效。所以现在我正在尝试发射器/监听器：

app.component (emitter):

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

export class AppComponent {

    @Output() skipToCtrl: EventEmitter<any> = new EventEmitter();

    skipLink() {
        this.skipToCtrl.emit();
    }
}

<a href="#content-start" (click)="skipLink()">Skip to main content</a>

login.component（侦听器）：

<input type="text" #firstControl name="username" />

不知道登录如何从登录中订阅事件。我一直在寻找文章，说不能这样做如何订阅事件在Angular2服务？但没有描述如何做到这一点的文章。

我希望我的ngOnInit函数做下面的事情: - 使用this.structureRequest.sendRequest()对某些数据进行http请求,这很好,并且在收到数据后开始使用this.viewNodes()函数查看它.我使用订阅,但它不起作用,我认为我做订阅功能有问题.请帮忙:)

1. HomeComponent.ts

   import {Component} from '@angular/core';
   import {Observable} from 'rxjs/Observable';
   import {StructureRequestService} from './StructureRequestService';
   
   
   export class Content {
   
   
   ok: boolean;
   content = [];
   }
   @Component({
   providers: [StructureRequestService],
   styleUrls: ['app/home/home.css'],
   templateUrl:'./app/home/homePageTemplate.html'
   
   })
   
   export class HomeComponent {
   contentArray = [];
   myRes: Content;
   showAssigned:boolean = false;
   showSubitems:boolean = false;
   showUsers:boolean = false;
   
   constructor(private structureRequest: StructureRequestService) {}
   
   ngOnInit() {
   this.structureRequest.sendRequest().subscribe( this.viewNodes());
   
   }
   
   viewNodes() {
   this.myRes = this.structureRequest.result;
   this.contentArray = this.myRes.content;
   this.showAssigned = true;
    }
    }
   

   Run Code Online (Sandbox Code Playgroud)

2.这是http服务,http get工作正常,收到的所有数据:

import {Injectable} from '@angular/core';
import …

在有人将其标记为重复之前以下是我尝试过但失败的链接

Angular 2 - 将数据从服务传递到组件

如何在 Angular2 中订阅服务上的事件？

场景我想将数据从我的 ng2 服务发送到组件，并且正在使用 ng2 HTTP 从 API 加载数据

下面是虚拟代码

我的服务

@Output() event_callback: EventEmitter<any> = new EventEmitter();

getUserDetails(id)
{
    var user_data;
    this.loadRemoteUrl('getUserdata?user_id=' + id).subscribe(
        data => { user_data = data},
        err => console.error(err),
        () => {
            console.log('Inside My Service');
            this.user_data = user_data;
            this.event_callback.emit(this.user_data);
        }
    );
}

我的组件

constructor(private http:Http, private myService: MyService) 
{
    var userDetails;
    myService.event_callback.subscribe(
        data => this.callbackFunction()
    );
}

callbackFunction()
{
    console.log("Inside MyComponent")
}

控制台日志

Inside My Service

HTTP 请求正确返回数据，我在发出之前尝试转储，它工作但问题是我无法访问组件中的数据，我尝试传递数据，现在我只是一些记录消息来识别流，但仍然无法看到来自我的组件文件的日志消息。

我错过了什么？