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

Piy*_*odi 1 eventemitter router-outlet angular

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

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);
Run Code Online (Sandbox Code Playgroud)

}

parent.component.html

<router-outlet (stateChanged)="onStateChange($event)"><router-outlet>
Run Code Online (Sandbox Code Playgroud)

parent.component.ts

onStateChange(event){
    console.log(event);
}
Run Code Online (Sandbox Code Playgroud)

这对我不起作用!

编译后的HTML代码如下所示:

<router-outlet></router-outlet>
<child-component>
    // all child component code
<child-component>
Run Code Online (Sandbox Code Playgroud)

有什么方法可以推(stateChanged)="onStateChange($event)"<child-component>元素吗?

有人可以帮忙吗?

Kes*_*ran 5

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

但是有<router-outlet></router-outlet>一个事件更新,允许添加组件:

<router-outlet (activate)="componentAdded($event)" (deactivate)="componentRemoved($event)"></router-outlet>
Run Code Online (Sandbox Code Playgroud)

这有助于通过以下方式与getter,setter和方法进行通信 componentAdded()

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

1)角度文档

2)创建共享服务角度

3)例1 例2


Saj*_*ran 0

不,您不能打开事件发射器 router-outlet

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

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