Angular在两个组件之间共享服务实例

Question

我正在编写需要共享服务实例的代码。 这是我遇到麻烦的代码示例大纲。

app.component.ts代码：

import { Component } from '@angular/core';
import {ROUTER_DIRECTIVES} from '@angular/router';
import {HeaderComponent} from './header.component';
import {TotalContainer} from './container-total.component';
@Component({
  selector: 'my-app',
  template: `
    <myheader [display]="display"></myheader>
    <router-outlet></router-outlet>
  `,
  directives:[HeaderComponent,TotalContainer,ROUTER_DIRECTIVES]
})
export class AppComponent { 
    display = true;
}

我的标头组件包含导航标签，这些标签会更新

现在，将替换的组件之一是container-total.component.ts

现在，在container-total.component.ts内部，我有另一个名为bottom.component的组件。

这是container-total.component.ts的代码

import {Component, OnInit} from '@angular/core';
import {BottomContainerComponent} from './bottom-container.component';
import {BlurredService} from '../services/blurred.service';
import {FollowUps} from '../properties/followups';

@Component({
    selector:'container-total',
    template:`

    <div class="container" [class.blurred]="!display">
         My Content of total container has to be blurred.
    </div>    
    <bottom-container></bottom-container>
    `,
    styles:[`
        .blurred{
    -webkit-filter: blur(1px);
    -moz-filter: blur(1px);
    -o-filter: blur(1px);
    -ms-filter: blur(1px);
    filter: blur(1px) grayscale(90%);
    }
    `],
    directives:[BottomContainerComponent],
    providers:[BlurredService]
})
export class TotalContainer implements OnInit{

    display;
    constructor(private blurredService: BlurredService){

    }

    checkBlurr(){
        this.display = this.blurredService.getService();
    }

    ngOnInit(){
        this.checkBlurr();
    }
}

现在，我使用相同的服务来更新bottom-container.component中显示的值。 这是代码

bottom-container.component.ts

import {Component, Output, EventEmitter, OnInit} from '@angular/core';
import {BlurredService} from '../services/blurred.service';

@Component({
    selector:'bottom-container',
    template:`
    <div class="container" [class.blurred]="!display"    (click)="displayPopup()">
         This is the bottom container needed to be blurred.
    </div>
    `,
    styles:[`

        .blurred{
            -webkit-filter: blur(1px);
            -moz-filter: blur(1px);
            -o-filter: blur(1px);
            -ms-filter: blur(1px);
            filter: blur(1px) grayscale(90%);
        }
    `],
    directives:[PopupComponent]    
})
export class BottomContainerComponent implements OnInit{
    display;  
    request:Requests = null;

    constructor(private blurredService: BlurredService){

    }

    checkBlurr(){
        this.display = this.blurredService.getService();
    }

    ngOnInit(){
        this.checkBlurr();
    }

    displayPopup(){
        this.blurredService.setService(false);
        this.display = this.blurredService.getService();
    }
}

现在，这是我编写的服务。

模糊服务

import {Injectable} from '@angular/core';

@Injectable()
export class BlurredService{

    display = true;
    setService(value){
        this.display = value;
    }

    getService(){
        return this.display;
    }
}

现在，每当单击底部容器中的div时，它就会变得模糊。 尽管我正在通过服务更新值，但是总容器中的div不是。

我应该使用底部容器的EventEmitter在总容器中调用函数“ checkBlurr”吗？ 但是，如果这样做，我可能要在总容器中有多个组件来实现路由。 然后，如何使用“”来使用@Output和EventEmitter。

谁能帮我这个？

Answer 1

您需要对组件交互做一些事情。 最简单的方法是将总组件中的“ display”属性直接设置为服务：

<div class="container" [class.blurred]="!blurredService.getService()">
    My Content of total container has to be blurred.
</div>