Question

我希望子组件访问共享服务获取数据并在将子组件注入主组件之后。我希望 sharedservice（rootscope）的数据直接将数据放在mainComponents HTML like here中。

mainComponent.ts

import { Component } from '@angular/core';
import {ChildComponent} from './child';
import {AppServiceService} from './app-service.service';

@Component({
  moduleId: module.id,

  selector: 'rootscope-app',

  templateUrl: 'rootscope.component.html',

  styleUrls: ['rootscope.component.css'],

  directives:[ChildComponent]

})

export class RootscopeAppComponent {

  title = 'rootscope works!';

  display:any;

  constructor(appServiceService:AppServiceService){  

    this.display=appServiceService.getter();

  }
}

sharedService.ts

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


@Injectable()

export class AppServiceService {

  ser = "hello i am from service";

  public data: any;

  constructor() {

  }

  settter(data: any) {

    this.data = data;

  }

  getter() {

    return this.data;
  }
}

mainComponent的子组件

import { Component, OnInit } from '@angular/core';

import {AppServiceService} from '../app-service.service'

@Component({
  moduleId: module.id,

  selector: 'app-child',

  templateUrl: 'child.component.html',

  styleUrls: ['child.component.css']

})

export class ChildComponent implements OnInit {

  dispaly: string;

  constructor(appServiceService: AppServiceService) {

    this.dispaly = "Child component binding...";

    appServiceService.settter(this.dispaly);

  }

  ngOnInit() {}
}

Answer 1

Angular2中没有

$ rootScope 和 $ scope 。您可以考虑使用服务（shareService）并将其注入 boostrap 功能。这样您就可以在整个应用程序中共享数据（HTML也是如此）。

看这里。 http://plnkr.co/edit/7A21ofKNdi0uvbMgLUDZ?p=preview

bootstrap(App, [sharedService]);

<强> sharedService

import {Injectable} from 'angular2/core'

@Injectable()
export class sharedService {
    name="micronyks";
}

<强>组件

@Component({
  selector: 'thecontent',
    template: `
    <h1>Component II - {{ss.name}}   </h1>
        `
})
export class TheContent {
  constructor(private ss: sharedService) {
    console.log("content started");
  }
}

Answer 2

鉴于所需的输出是我们想在任何模板中使用共享值，那么使用服务不是答案。

解决方案是为所有组件创建一个基类，我们需要全局所有组件。

创建一个类，将其命名为BaseComponent

export class BaseComponent{

   constructor(){}

   public someMethod(): string{
     return "some string";
   }

   //and whatever methods you need, a method can call services and return data from it

}

并使每个组件扩展它

export class TestPage extends BaseComponent {

并在其HTML模板中

<span> {{someMethod()}} </span>

或者如果您希望从服务函数调用中触发视图（模板）中的更改，您可以在服务中放置一个回调并从组件中分配它，这样就可以了每当调用服务函数时都会触发，以这种情况为例

在我的情况下，我想显示一条可以从任何组件触发的消息，因此我将其放置在应用程序生存期内幸存的app.component.html

    <div class="col-lg-12">
        <div [hidden]="!msg" (click)="msg=''" class="alert alert-info" role="alert">
            {{msg}}
        </div>
    </div>

在app.component.ts

内

constructor(private main: MainService){}

msg: string = "";
ngOnInit(): void {
    this.main.showMsg = (msg)=>{this.msg = msg;}
}

MainService是包含回调的服务，如下所示

//main.service.ts
public showMsg:(msg: string)=>void;

现在从任何组件，在构造函数中注册主服务，您可以显示如下消息

if(this.main.showMsg){
     this.main.showMsg("the message text");
}

Answer 3

可以使用角度BehaviorSubject和asObservable

检查以下示例代码

服务档案

@Injectable()
export class commonService {
    private data = new BehaviorSubject('');
    currentData = this.data.asObservable()

    constructor() { }

    updateMessage(item: any) {
        this.data.next(item);
    }

}

组件

设置任何组件的数据

 constructor(private _data: commonService) { }
 shareData() {
      this.currentValue = this.queryTerm;
      this._data.updateMessage(this.currentValue);
  }

从任何组件收听

constructor(private _data: commonService) { }
ngOnInit() {
        this._data.currentData.subscribe(currentData => this.currentValue = currentData)
    }

您可以使用这种方式在任何组件之间进行通信。

More info 和other methodes

什么是角度2的根范围的替代方案？

3 个答案: