Binding 来自路由器出口的角度2输出

我想从路由器插座内部呈现的子组件进行导航。 我的父组件有一个路由器配置，我想在某些事件上手动导航。但我不知道如何在没有输出的情况下，将一些数据（用于导航）从子级传递到父级。因为这个建筑不起作用

 <router-outlet (navigateTo)="navigateToMessagePart($event)"></router-outlet>

我怎样才能以正确的方式做这件事？也许是从孩子那里导航？但我如何从child获得父方法。 非常感谢您的帮助

只是添加路由组件的占位符。不支持任何类型的绑定

您可以创建一个自定义的

，允许您这样做，或者更常见的是，使用共享服务在父组件和路由组件之间进行通信

有关更多详细信息，请参阅

更新

现在有一个事件允许获取添加的组件

它允许与

componentAdded（）

不过，共享服务是首选方式。

不能用于从子组件发出事件。两个组件之间通信的一种方法是使用公共服务

创建服务

共享服务

母组件应接受该变更。为此，请在父级构造函数中捕获订阅

parent.component.ts

---

希望这有帮助：）

以上给出的答案是正确和完整的。我只想为那些解决方案不适用于他们的人补充一点，他们应该只将服务添加到父组件中的提供者，而不是子组件中的提供者，以确保您获得服务的单例，否则将创建两个服务实例。

---

这个回答是受之前回复中@HeisenBerg的评论启发的。

我对Antara Datta的回答做了一些修改。 我创建了一个订户服务

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

@Injectable({
  providedIn: 'root'
})
export class Subscriber<T>
{
  protected observable = new Subject<T>();

  public next(item: T)
  {
    this.observable.next(item);
  }

  public subscribe(callback: (item:T)=>void) {
    this.observable.subscribe(callback);
  }
}

从'@angular/core'导入{Injectable}；
从'rxjs'导入{Subject}；
@注射的({
providedIn:'根'
})
导出类订户
{
受保护的可观察对象=新主体（）；
下一个公共项目（项目：T）
{
本.可观察.下（项）；
}
公开订阅（回调：（项：T）=>void）{
this.observable.subscribe（回调）；
}
}

每当我需要两个组件来共享某些信息时，我都会将此服务注入订阅它的构造函数中：

 constructor(protected layoutOptions: Subscriber<Partial<LayoutOptions>>)
 {
    layoutOptions.subscribe(options => this.options = Object.assign({}, this.options, options));
 }

构造函数（受保护的布局选项：订阅服务器）
{
layoutOptions.subscribe（options=>this.options=Object.assign（{}，this.options，options））；
}

还有更新它的那个

constructor(protected router: Router, protected apiService: ApiService, protected layoutOptions: Subscriber<Partial<LayoutOptions>>)
  {
    this.layoutOptions.next({showNavBar: false});
  }

构造函数（受保护的路由器：路由器，受保护的apiService:apiService，受保护的layoutOptions:Subscriber）
{
this.layoutOptions.next（{showNavBar:false}）；
}

我无法理解为什么路由器不转发“@输出”

最后，我派遣了裸体DOM活动

//dom节点需要是对组件实例中dom节点的引用
//最好是根
dom.dispatchEvent(
新建CustomEvent（'事件'{
详细信息：payload，//请说明如何在父组件模板上使用“text”？：@AndrewJuniorHoward，您可以将其分配给一个局部变量。例如：导出类ParentComponent{dummyText:string；构造函数（private\u sharedService:sharedService）{{u sharedService.ChangeEmissed$.subscribe（text=>{this.dummyText=text；}）；}回答得很好，但我想强调一件小事：如果我们在销毁组件后不取消订阅ChangeEmissed$，那么在我们返回该组件后，它将比一次发出的次数要多。是的，我找到了解决方案。你应该只在父组件中将服务添加到提供商。如果你同时将其添加到父组件和子组件，一个新的服务实例被注入到这两个组件中。或者，如果某个服务希望在应用程序中的所有组件之间共享，请将其添加到app.module中的提供程序中。ts@Milo共享服务可由多个侦听它的组件使用。它不限于一对。您能否详细说明为什么首选共享服务RedWay？因为没有其他好方法，而共享服务通常是非直接父子组件之间通信的首选方式。这会给我一个错误，即“找不到名称”LayoutOptions LayoutOptions可以是您想要订阅和更新的任何东西。现在可以通过
providedIn:'root'
添加到
可注入的
装饰器。
import {Injectable} from '@angular/core';
import {Subject} from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class Subscriber<T>
{
  protected observable = new Subject<T>();

  public next(item: T)
  {
    this.observable.next(item);
  }

  public subscribe(callback: (item:T)=>void) {
    this.observable.subscribe(callback);
  }
}

 constructor(protected layoutOptions: Subscriber<Partial<LayoutOptions>>)
 {
    layoutOptions.subscribe(options => this.options = Object.assign({}, this.options, options));
 }

constructor(protected router: Router, protected apiService: ApiService, protected layoutOptions: Subscriber<Partial<LayoutOptions>>)
  {
    this.layoutOptions.next({showNavBar: false});
  }