Question

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

我正在使用Angular 2（TypeScript）。

我尝试使用ChatService服务传递价值＆＃34; 12345＆＃34;从App到ChatDetailsComponent。

如果布尔值showChatDetails为真，则显示＆＃34; 12345＆＃34;我第一次点击Show按钮，效果很好。

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

（请不要切换到[隐藏]，因为我需要* 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

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

我认为，只要@Input() ChatDetailsComponent App chatId并且ChatDetailsComponent chatId每次{{1}}更改时都会创建一个新的组件实例，就更不容易出错了

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

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

2 个答案: