Asynchronous 角度2-使用组件中的观察值向其他组件发射值_Asynchronous_Angular_Reactive Programming_Observable

Asynchronous 角度2-使用组件中的观察值向其他组件发射值

asynchronous angular

Asynchronous 角度2-使用组件中的观察值向其他组件发射值,asynchronous,angular,reactive-programming,observable,Asynchronous,Angular,Reactive Programming,Observable,我想知道是否有可能在组件中使用可观测值，以及其他哪些组件可以订阅错误列表组件 -组件被注入boot.ts文件中，我在其中加载我的所有服务（boostrap所在的位置）因此，到目前为止，当从BugListContainerComponent调用.next时，BugListContainerComponent中的“订阅”似乎没有受到影响下面是一张概览图：我错过了什么？谢谢实际上这是不可能的。您只能使用定义为子组件的@output的EventEmitter类来触发组件的父组件的事件对于

我想知道是否有可能在组件中使用可观测值，以及其他哪些组件可以订阅

错误列表组件 -组件被注入boot.ts文件中，我在其中加载我的所有服务（boostrap所在的位置）

因此，到目前为止，当从BugListContainerComponent调用.next时，BugListContainerComponent中的“订阅”似乎没有受到影响

下面是一张概览图：

我错过了什么？

谢谢

实际上这是不可能的。您只能使用定义为子组件的

@output

的

EventEmitter

类来触发组件的父组件的事件

对于其他组件，您需要在共享服务中定义

可观察的

。组件可以注入此服务并订阅可观察到的服务。另一个组件也可以注入服务并触发事件

它的代码与您的代码几乎相同，只是在服务中

共享服务

export class SharedService {
  constructor() { 
    this.viewBugList$ = new BehaviorSubject<boolean>(false);
  }

  enableView() {
    this.viewBugList$.next(true);
  }
}

BugListContainerComponent

import {BugListComponent} from '../buglist/bug-list.component';

initView: boolean;

constructor(private _bugListComp: BugListComponent) {
    this.initView = false;
}

ngOnInit() {
    this._bugListComp.viewBugList$.subscribe(e => {
        if(e != null) {
            this.initView = e;
        }
    });
}

constructor(private service: SharedService) {
  this.initView = false;
}

ngOnInit() {
  this.service.viewBugList$.subscribe(e => {
    if(e != null) {
      this.initView = e;
    }
  });
}

viewBugList$: Subject<boolean>;

constructor(private service:SharedService) { 
  this.viewBugList$ = new BehaviorSubject<boolean>(false);
}

// Called from template, sends in 'true'
private enableIEview(enable: boolean) {   
  if(enable) {
    this.service.viewBugList$.next(true);
  }
}

错误列表组件

import {BugListComponent} from '../buglist/bug-list.component';

initView: boolean;

constructor(private _bugListComp: BugListComponent) {
    this.initView = false;
}

ngOnInit() {
    this._bugListComp.viewBugList$.subscribe(e => {
        if(e != null) {
            this.initView = e;
        }
    });
}

constructor(private service: SharedService) {
  this.initView = false;
}

ngOnInit() {
  this.service.viewBugList$.subscribe(e => {
    if(e != null) {
      this.initView = e;
    }
  });
}

viewBugList$: Subject<boolean>;

constructor(private service:SharedService) { 
  this.viewBugList$ = new BehaviorSubject<boolean>(false);
}

// Called from template, sends in 'true'
private enableIEview(enable: boolean) {   
  if(enable) {
    this.service.viewBugList$.next(true);
  }
}

viewBugList$：主题；
构造函数（私有服务：SharedService）{
this.viewBugList$=新行为主体（false）；
}
//从模板调用，以“true”发送
私有enableeview（enable:boolean）{
如果（启用）{
this.service.viewBugList$.next（true）；
}
}

在引导应用程序时必须定义此共享服务，以便为整个应用程序提供一个实例。

事实上，这是不可能的。您只能使用定义为子组件的

@output

的

EventEmitter

类来触发组件的父组件的事件

对于其他组件，您需要在共享服务中定义

可观察的

。组件可以注入此服务并订阅可观察到的服务。另一个组件也可以注入服务并触发事件

它的代码与您的代码几乎相同，只是在服务中

共享服务

export class SharedService {
  constructor() { 
    this.viewBugList$ = new BehaviorSubject<boolean>(false);
  }

  enableView() {
    this.viewBugList$.next(true);
  }
}

BugListContainerComponent

import {BugListComponent} from '../buglist/bug-list.component';

initView: boolean;

constructor(private _bugListComp: BugListComponent) {
    this.initView = false;
}

ngOnInit() {
    this._bugListComp.viewBugList$.subscribe(e => {
        if(e != null) {
            this.initView = e;
        }
    });
}

constructor(private service: SharedService) {
  this.initView = false;
}

ngOnInit() {
  this.service.viewBugList$.subscribe(e => {
    if(e != null) {
      this.initView = e;
    }
  });
}

viewBugList$: Subject<boolean>;

constructor(private service:SharedService) { 
  this.viewBugList$ = new BehaviorSubject<boolean>(false);
}

// Called from template, sends in 'true'
private enableIEview(enable: boolean) {   
  if(enable) {
    this.service.viewBugList$.next(true);
  }
}

错误列表组件

import {BugListComponent} from '../buglist/bug-list.component';

initView: boolean;

constructor(private _bugListComp: BugListComponent) {
    this.initView = false;
}

ngOnInit() {
    this._bugListComp.viewBugList$.subscribe(e => {
        if(e != null) {
            this.initView = e;
        }
    });
}

constructor(private service: SharedService) {
  this.initView = false;
}

ngOnInit() {
  this.service.viewBugList$.subscribe(e => {
    if(e != null) {
      this.initView = e;
    }
  });
}

viewBugList$: Subject<boolean>;

constructor(private service:SharedService) { 
  this.viewBugList$ = new BehaviorSubject<boolean>(false);
}

// Called from template, sends in 'true'
private enableIEview(enable: boolean) {   
  if(enable) {
    this.service.viewBugList$.next(true);
  }
}

viewBugList$：主题；
构造函数（私有服务：SharedService）{
this.viewBugList$=新行为主体（false）；
}
//从模板调用，以“true”发送
私有enableeview（enable:boolean）{
如果（启用）{
this.service.viewBugList$.next（true）；
}
}

在引导应用程序时必须定义此共享服务，以便为整个应用程序提供一个实例。

BugListComponent

import {BugListComponent} from '../buglist/bug-list.component';

initView: boolean;

constructor(private _bugListComp: BugListComponent) {
    this.initView = false;
}

ngOnInit() {
    this._bugListComp.viewBugList$.subscribe(e => {
        if(e != null) {
            this.initView = e;
        }
    });
}

constructor(private service: SharedService) {
  this.initView = false;
}

ngOnInit() {
  this.service.viewBugList$.subscribe(e => {
    if(e != null) {
      this.initView = e;
    }
  });
}

viewBugList$: Subject<boolean>;

constructor(private service:SharedService) { 
  this.viewBugList$ = new BehaviorSubject<boolean>(false);
}

// Called from template, sends in 'true'
private enableIEview(enable: boolean) {   
  if(enable) {
    this.service.viewBugList$.next(true);
  }
}

sharedService.ts

BugListContainerComponent

import {BugListComponent} from '../buglist/bug-list.component';

initView: boolean;

constructor(private _bugListComp: BugListComponent) {
    this.initView = false;
}

ngOnInit() {
    this._bugListComp.viewBugList$.subscribe(e => {
        if(e != null) {
            this.initView = e;
        }
    });
}

constructor(private service: SharedService) {
  this.initView = false;
}

ngOnInit() {
  this.service.viewBugList$.subscribe(e => {
    if(e != null) {
      this.initView = e;
    }
  });
}

viewBugList$: Subject<boolean>;

constructor(private service:SharedService) { 
  this.viewBugList$ = new BehaviorSubject<boolean>(false);
}

// Called from template, sends in 'true'
private enableIEview(enable: boolean) {   
  if(enable) {
    this.service.viewBugList$.next(true);
  }
}

错误列表组件

import {BugListComponent} from '../buglist/bug-list.component';

initView: boolean;

constructor(private _bugListComp: BugListComponent) {
    this.initView = false;
}

ngOnInit() {
    this._bugListComp.viewBugList$.subscribe(e => {
        if(e != null) {
            this.initView = e;
        }
    });
}

constructor(private service: SharedService) {
  this.initView = false;
}

ngOnInit() {
  this.service.viewBugList$.subscribe(e => {
    if(e != null) {
      this.initView = e;
    }
  });
}

viewBugList$: Subject<boolean>;

constructor(private service:SharedService) { 
  this.viewBugList$ = new BehaviorSubject<boolean>(false);
}

// Called from template, sends in 'true'
private enableIEview(enable: boolean) {   
  if(enable) {
    this.service.viewBugList$.next(true);
  }
}

sharedService.ts

BugListContainerComponent

import {BugListComponent} from '../buglist/bug-list.component';

initView: boolean;

constructor(private _bugListComp: BugListComponent) {
    this.initView = false;
}

ngOnInit() {
    this._bugListComp.viewBugList$.subscribe(e => {
        if(e != null) {
            this.initView = e;
        }
    });
}

constructor(private service: SharedService) {
  this.initView = false;
}

ngOnInit() {
  this.service.viewBugList$.subscribe(e => {
    if(e != null) {
      this.initView = e;
    }
  });
}

viewBugList$: Subject<boolean>;

constructor(private service:SharedService) { 
  this.viewBugList$ = new BehaviorSubject<boolean>(false);
}

// Called from template, sends in 'true'
private enableIEview(enable: boolean) {   
  if(enable) {
    this.service.viewBugList$.next(true);
  }
}

啊哈，我很害怕。所以可以通过SidebarComp将

@输出从BugListComp传递到AppComp？然后，@input
通过MainContainerComp从AppCom下载到BugListContainerComp？那么，仅仅为它创建一个服务可能会更容易^^谢谢你的快速回答，顺便说一句！是的，这是可能的，但事件不会冒泡。因此，您需要在每个级别定义它们。所以这会很痛苦。。。是的，创建服务肯定更容易；-）好的，谢谢！对于这些类型的服务，这些服务将非常小，并且只发出例如true/false的信息，如果存在类似的情况，那么在一个服务中收集这些信息是否可行？或者每个人都有一项服务？是的，有意义。事实上，你可以随心所欲地组织这些活动；-）只有一个服务具有多个属性，多个属性。。。这取决于你我有一个问题…angular 2中的共享服务就像websocket？我的意思是活着？或者我们应该触发一个事件并发送一个值？我有一个想法在我的脑海里…我想创建一个服务和观看一个属性，当更改为真或假…发送值…这个共享服务就像我的想法？！如何创建这样的服务？啊哈，我很害怕。所以可以通过SidebarComp将@输出从BugListComp传递到AppComp？然后，@input
通过MainContainerComp从AppCom下载到BugListContainerComp？那么，仅仅为它创建一个服务可能会更容易^^谢谢你的快速回答，顺便说一句！是的，这是可能的，但事件不会冒泡。因此，您需要在每个级别定义它们。所以这会很痛苦。。。是的，创建服务肯定更容易；-）好的，谢谢！对于这些类型的服务，这些服务将非常小，并且只发出例如true/false的信息，如果存在类似的情况，那么在一个服务中收集这些信息是否可行？或者每个人都有一项服务？是的，有意义。事实上，你可以随心所欲地组织这些活动；-）只有一个服务具有多个属性，多个属性。。。这取决于你我有一个问题…angular 2中的共享服务就像websocket？我的意思是活着？或者我们应该触发一个事件并发送一个值？我有一个想法在我的脑海里…我想创建一个服务和观看一个属性，当更改为真或假…发送值…这个共享服务就像我的想法？！如何创建这样的服务？