角度共享兩個組件之間的服務實例

我正在處理一個代碼，我需要共享該服務的實例。這裏是我面臨麻煩的代碼示例大綱。角度共享兩個組件之間的服務實例

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。

任何人都可以幫助我嗎？

來源

2016-08-11 Baradwaj Aryasomayajula

您使用RC4或RC5 – rashfmnb

什麼版本我使用RC4。 –

我將所有內容都更改爲RC5。這似乎很棒。減少許多頭痛。 –

你需要對你的組件交互做些事情。最簡單的事情將是直接設置了「顯示」屬性在你的總組件的服務：

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

來源

2016-08-12 01:44:55

你真棒。 –

角度共享兩個組件之間的服務實例

回答

相關問題