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

我的标题组件包含将更新

的导航标签

现在，将替换的一个组件是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中显示的值。这是代码

底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在total-container中调用函数“checkBlurr”。但是，如果我这样做，我可能在总容器中有多个组件，我将实现路由。然后我应该如何使用“”来使用@Output和EventEmitter。

任何人都能帮助我吗？

Answer 1

您需要对组件交互执行某些操作。最简单的方法是设置＆＃34;显示＆＃34;您的总组件中的属性直接到服务：

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

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

1 个答案: