eventEmitter 可以在路由器插座上工作吗？答案

【问题标题】：can eventEmitter work on router-outlet?eventEmitter 可以在路由器插座上工作吗？
【发布时间】：2018-12-24 14:49:40
【问题描述】：

我在我的父组件中，我想检测发出的事件。

child.component.ts

@Component({
    selector: 'child-component',
    templateUrl: './child.component.html',
    styleUrls: ['./child.component.scss']
})   
export class ChildComponent implements OnInit { 

    @Input() public state: String = 'CLOSED';

    @Output() public stateChanged: EventEmitter<String> = new EventEmitter<String>();

    this.stateChanged.emit(this.state);

}

parent.component.html

<router-outlet (stateChanged)="onStateChange($event)"><router-outlet>

parent.component.ts

onStateChange(event){
    console.log(event);
}

这对我不起作用！

编译后的 HTML 代码如下：

<router-outlet></router-outlet>
<child-component>
    // all child component code
<child-component>

有没有办法将(stateChanged)="onStateChange($event)" 推入<child-component> 元素中？

有人可以帮忙吗？

【问题讨论】：

使用服务。路由使您的组件与渲染层次结构分离，不要试图改变它
如果可能的话，您能举个例子吗？
@Injectable({providedIn: 'root') export default class {change = new Subject(); triggerChange() { this.change.next();}

标签： angular eventemitter router-outlet

【解决方案1】：

<router-outlet></router-outlet> 被认为是placeholder，目的是添加routed components。它不支持任何类型的绑定。

但是<router-outlet></router-outlet> 有一个更新，其中包含允许添加组件的事件：Source

<router-outlet (activate)="componentAdded($event)" (deactivate)="componentRemoved($event)"></router-outlet>

这有助于通过componentAdded()与getter、setter和方法进行通信

首选方法是使用共享服务检查这些链接来创建共享服务

1)Angular Doc

2)Create shared service angular

3)Example1 Example2

【讨论】：

现在上有可用的绑定。例如，您可以将事件绑定到(activate)="doAThing($event)"，它会在路由器加载新组件时为您提供事件。 doAThing(e) {console.log(e.constructor.name)} 会给你组件的名字
谢谢！然后我可以从$event 访问我想要的任何输出，它是实际的组件。事件比使用发射器更容易

【解决方案2】：

不，您不能在 router-outlet 上拥有事件发射器。

我建议您拥有自己的带有输入属性的组件并在其上使用偶数

<list [list]="list" (onStateChanged)="stateChanged($event)"></list>

【讨论】：

感谢@Sajeetharan，您的回答。但我已经更新了我的问题。你能看一下吗？