3

编辑：嗯，我应该更清楚。这是一个 angular2-meteor 项目。因为流星是反应性的，所以可能有其他方式。但是@lodewijk-bogaards 是纯 Angular2 项目的一个很好的解决方案。

我正在使用 Angular 2（TypeScript）。

我尝试使用ChatService服务将值“12345”从 传递App到ChatDetailsComponent.

如果布尔showChatDetails值为真，那么当我第一次单击“显示”按钮时，它将显示“12345”，效果很好。

问题是，如果布尔值showChatDetails是假的，它会在我第二次单击“显示”按钮后显示“12345”。我不知道为什么我第二次点击它时它会起作用，这也应该是第一次。

（请不要切换到 [hidden]，因为我这里需要 *ngIf。）

// 应用程序.ts

import {Component, View} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {ChatService} from './chat.service';
import {ChatDetailsComponent} from './chat-details.component';

@Component({
    selector: 'app'
})
@View({
    directives: [ChatDetailsComponent],
    template: `
        <button (click)="showButton()">Show</button>
        <chat-details-component *ngIf="showChatDetails"></chat-details-component>
    `
})
class App {
    // Here if it is true, it works well. If it is false, the problem comes.
    showChatDetails:boolean = false;  

    constructor(private _chatService: ChatService) {}

    showButton() {
        this._chatService.setChatId("12345");
        this.showChatDetails = true;
    }
}

bootstrap(App, [ChatService]);

// 聊天详细信息.component.ts

import {Component, View} from 'angular2/core';
import {ChatService} from './chat.service';

@Component({
    selector: 'chat-details-component'
})
@View({
    template: `
        <div>ID: {{chatId}}</div>
    `
})
export class ChatDetailsComponent {
    chatId:string;

    constructor(private _chatService: ChatService){}

    ngOnInit() {
        this._chatService.getChatId().subscribe(id => this.chatId = id);
    }
}

// 聊天服务.ts

import {EventEmitter} from 'angular2/core';

export class ChatService {
    chatId: EventEmitter<string> = new EventEmitter();

    setChatId(id) {
        this.chatId.emit(id);
    }

    getChatId() {
        return this.chatId;
    }
}
4

2 回答 2

4

对我来说，这似乎是一种竞争条件。如果在发出之后ChatDetailsComponent订阅它，它将不会收到它。这是很容易实现的，因为 Angular 会在 Rx 安排事件发射的同时安排组件的创建。ChatService chatId

我可以提出多种解决方案，但我建议您考虑使用ReplaySubject而不是 EventEmitter。

于 2016-01-31T21:10:49.713 回答
0

我不确定您的目标是按照您所说的方式完成任务，或者您是否灵活地完成任务。

我认为将chatId设置为@Input()ofChatDetailsComponent并在更改App时创建组件的新实例的可能性要小得多。chatId

包含组件必须知道何时ChatDetailsComponent需要创建实例。让它传递所需的chatIdirhgt 对我来说似乎是一种更好的方法。

于 2016-02-01T01:04:19.287 回答