Angular2中的* ngIf服务不能很好地工作

Question

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

我正在使用Angular 2（TypeScript）。

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

如果布尔showChatDetails为true，则在我第一次单击Show按钮时它将显示“12345”，这样效果很好。

问题是，如果布尔值showChatDetails为false，则在第二次单击“显示”按钮后，它将显示“12345”。 我不知道为什么它第二次点击它时才有效，这也应该是第一次。

（请不要切换到[隐藏]，因为我需要* ngIf。）

// app.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]);

// chat-details.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);
    }
}

// chat.service.ts

import {EventEmitter} from 'angular2/core';

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

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

    getChatId() {
        return this.chatId;
    }
}

Answer 1

对我来说看起来像是一场竞争。 如果ChatDetailsComponent订阅了ChatService 后 chatId已经发出它不会接受它。 这很容易实现，因为Angular将在Rx计划事件发射的同时安排组件的创建。

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

Answer 2

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

我认为这是更容易出错，使chatId的@Input()的ChatDetailsComponent和具有App创建组件时的新实例chatId变化。

包含组件必须知道何时需要创建ChatDetailsComponent的实例。 让它通过所需的chatId irhgt似乎是一个更好的方法对我来说。