角度共享两个组件之间的服务实例

问题描述：

我正在处理一个代码，我需要共享该服务的实例。这里是我面临麻烦的代码示例大纲。角度共享两个组件之间的服务实例

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

我的标题组件包含NAV-突出部，其将更新

现在，一个部件的，其将取代是容器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，尽管我通过服务更新了值。

我应该使用来自底部容器的EventEmitter在总容器中调用函数“checkBlurr”。但是，如果我这样做，我可能在总容器中有多个组件，我将为其实施路由。那么我应该如何使用@“使用@Output和EventEmitter。

任何人都可以帮助我吗？

您使用RC4或RC5 – rashfmnb

什么版本我使用RC4。 –

我将所有内容都更改为RC5。这似乎很棒。减少许多头痛。 –

答

你需要对你的组件交互做些事情。最简单的事情将是直接设置了“显示”属性在你的总组件的服务：

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

你真棒。 –

角度共享两个组件之间的服务实例

相关推荐