Угловое разделение экземпляра службы между двумя компонентами

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

Мой компонент заголовка содержит нав язычки, которые обновят

Теперь один из компонентов, который придет на смену является контейнером total.component .ts

Теперь внутри container-total.component.ts У меня есть еще один компонент, называемый bottom.component.

Вот код для контейнеров-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(); 
    } 
} 

Теперь я обновляемый значение для отображения в нижнем container.component, используя ту же самую услугу. Вот код

донные-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(); 
    } 
} 

Теперь это услуга, которую я написал.

blurred.service

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

@Injectable() 
export class BlurredService{ 

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

    getService(){ 
     return this.display; 
    } 
} 

Теперь, когда когда-либо DIV в нижнем контейнере становится щелкнул он становится размытым. Но не div в суммарном контейнере, хотя я обновляю стоимость через службу.

Должен ли я вызвать функцию «checkBlurr» в суммарном контейнере, используя EventEmitter из нижнего контейнера. Но если я это сделаю, у меня может быть более одного компонента в total-container, для которого я собираюсь реализовать маршрутизацию. Тогда как я должен использовать @Output и EventEmitter, используя «».

Может ли кто-нибудь помочь мне в этом?

Answer 1

Вам необходимо что-то сделать с помощью компонента. Проще всего было бы установить свойство «дисплея» в вашей общей составляющей непосредственно к услуге:

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