Meteor 服务与Angular2中的*ngIf不兼容

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

我使用的是Angular 2（打字脚本）

我尝试使用

ChatService

service将值“12345”从

App

传递到

ChatDetailsComponent

如果布尔值

showChatDetails

为true，则在我第一次单击show按钮时，它将显示“12345”，效果很好

问题是，如果布尔值

showChatDetails

为false，则在我第二次单击show按钮后，它将显示“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]);

从'angular2/core'导入{Component，View}；
从'angular2/platform/browser'导入{bootstrap}；
从“./chat.service”导入{ChatService}；
从“./chat details.component”导入{ChatDetailsComponent}；
@组成部分({
选择器：“应用程序”
})
@看法({
指令：[ChatDetailsComponent]，
模板：`
显示
`
})
类应用程序{
//在这里，如果它是真的，它工作得很好。如果它是假的，问题就来了。
showChatDetails：布尔值=false；
构造函数（私有_chatService:chatService）{}
showButton（）{
此.u chatService.setChatId（“12345”）；
this.showChatDetails=true；
}
}
引导（应用程序，[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);
    }
}

从'angular2/core'导入{Component，View}；
从“./chat.service”导入{ChatService}；
@组成部分({
选择器：“聊天详细信息组件”
})
@看法({
模板：`
ID:{{chatId}
`
})
导出类ChatDetails组件{
chatId：字符串；
构造函数（私有_chatService:chatService）{}
恩戈尼尼特（）{
this.\u 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;
    }
}

从'angular2/core'导入{EventEmitter}；
出口类聊天室服务{
chatId:EventEmitter=neweventemitter（）；
setChatId（id）{
this.chatId.emit（id）；
}
getChatId（）{
返回此.chatId；
}
}

在我看来，这是一种竞赛条件。如果

ChatDetailsComponent

在发出

chatId

后订阅了

ChatService

，则它将不会接收到它。这很容易实现，因为Angular将在Rx计划事件发射的同时计划组件的创建

---

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

我不确定您的目标是按照您所述的方式完成任务，还是灵活地完成任务

我认为将chatId设置为

chattailsComponent

的

@Input（）

，并在

chatId

更改时让

App

创建组件的新实例，这样的错误就不会太多

---

包含组件必须知道何时仍然需要创建

ChatDetailsComponent

的实例。让它通过所需的

chatId

irhgt对我来说似乎是更好的方法。

谢谢，洛德维克！实际上这是一个angular2流星项目。因为meteor是反应型的，我还没有在RxJS项目中看到任何meteor。所以我将等待一点时间，等待其他答案。刚刚尝试了ReplaySubject，效果很好！。这是正确的答案，解释也是正确的。实际上，

EventEmitter

只是一个RxJs

主题

，angular2需要RxJs，所以我无法想象它不存在于angular2 meteor中。@LodewijkBogaards是的，你是对的，我刚刚意识到EventEmitter和Rx之间的关系。但是，我只在

angular2/core.d.ts

中找到EventEmitter，而没有Rx。所以我不能直接使用Rx.abc。我可能要花点时间才能弄明白。