Question

我有2个组件（比如组件A和组件B），它们在组件层次结构中远离。我希望根据组件B 中的事件切换组件A 的可见性。我试图通过两个组件共享的服务传递此状态。

我尝试了几种方法，但没有一种方法适合我。我不确定这是否是预期的，或者我是否做错了什么。

ControlService

@Injectable()
export class ControlService {
    public isOpenState: Boolean = false;

    constructor() { }

    enable() {
        this.isOpenState = true;
    }

    disable() {
        this.isOpenState = false;
    }

    isOpen() {
        return this.isOpenState;
    }

}

方法1

组件Foo

export class FooComponent implements OnInit {
    private isOpen:Boolean;

    constructor(controlService: ControlService) {
        this.isOpen = controlService.isOpenState;
    }
}

HTML

<div id="wrapper" *ngIf="isOpen"> </div>

方法2

组件Foo

export class FooComponent implements OnInit {
    private isOpen:Boolean;
    private controlService: ControlService;

    constructor(_controlService: ControlService) {
        this.controlService = _controlService;
    }

    fetchState(){
    }

    ngOnInit() {
        console.log('Hello Component');
    }
}

HTML

<div id="wrapper" *ngIf="controlService.isOpen()"> </div>

方法3

HTML

<div id="wrapper" *ngIf="controlService.isOpenState"> </div>

以上都不是按预期为我工作，组件的状态不反映服务中的状态。哪一个是正确的方法，我在其中缺少什么？如果不是，那么正确的方法是什么？

Answer 1

方法1

export class FooComponent implements OnInit {
    private isOpen:Boolean;

    constructor(controlService: ControlService) {
        this.isOpen = controlService.isOpenState;
    }
}

仅更新this.isOpen一次。 controlService.isOpenState

中不会更新FooComponent的更新后续内容

方法2

如果您的*ngIf看起来像

，

应该有效

*ngIf="controlService.isOpen()"

方法3

如果您的*ngIf看起来像

，

应该有效

*ngIf="controlService.isOpenState"

首选方法是在服务中使用observable而不是plain属性，以便Angular获得有关更新的通知，而不是更改检测轮询更改。

有关详细信息，请参阅https://angular.io/docs/ts/latest/cookbook/component-communication.html

Angularjs状态绑定

1 个答案: