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

Question

I am working on a code where I need to share the instance of the service. Here is the sample outline of the code where I am facing a trouble.

app.component.ts code:

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;
}

My header component contains the nav-tabs which will update the

Now, one of the component which will replace the is container-total.component.ts

Now Inside the container-total.component.ts I have another component called bottom.component.

Here the code for 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();
    }
}

Now, I am updating the value for the display in the bottom-container.component using the same service. Here is the code

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();
    }
}

Now, this is the service I have written.

blurred.service

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

@Injectable()
export class BlurredService{

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

    getService(){
        return this.display;
    }
}

Now, When ever the div in bottom-container is getting clicked it is getting blurred. But not the div in the total-container, though I am updating the value through the service.

Should I call the function "checkBlurr" in total-container using EventEmitter from bottom-container. But if I do that, I might have more than one components in total-container for which I am going to implement the routing. Then how should I use the @Output and EventEmitter using the "".

Can any one help me with this?

Answer 1

You need to do something with your component interaction. The easiest thing would be to set the "display" property in your total component directly to the service:

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