Question

我的父组件中有一个要检测发射事件的地方。

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>推送？

请问有人可以帮忙吗？

Answer 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

Answer 2

否，您不能在 router-outlet 上使用事件发射器。

我建议您使用输入属性创建自己的componnet并在其上使用偶数

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

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

2 个答案: