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

我的header组件包含nav-tabs，它将更新

现在，要替换的组件之一是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();
    }
}

现在，这是我写的服务。

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"在total_container使用EventEmitter从底部容器。但是，如果我这样做，我可能在一个容器中有多个组件，我将为其实现路由。那么我应该如何使用@Output和EventEmitter使用"。

有谁能帮我一下吗?

Answer 1

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

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