Angular:当子组件位于路由器出口时与其通信

基础概念

在Angular中，路由器出口（Router Outlet）是用于在应用中展示路由组件的占位符。当子组件位于路由器出口时，它通常是通过路由配置动态加载的。与这样的子组件通信可以通过以下几种方式实现：

输入输出属性（@Input/@Output）：父组件可以通过输入属性向子组件传递数据，子组件可以通过输出属性向父组件发送事件。
服务（Service）：通过共享服务，子组件和父组件可以共享数据和状态。
路由事件（Route Events）：通过监听路由事件，可以在路由变化时执行特定的逻辑。
ActivatedRoute：通过ActivatedRoute服务，可以访问当前路由的参数和数据。

类型

父子组件通信：通过输入输出属性。
跨组件通信：通过服务。
路由相关通信：通过路由事件和ActivatedRoute。

应用场景

当需要在路由变化时更新应用状态。
当需要从父组件向动态加载的子组件传递数据。
当需要监听路由变化以执行特定逻辑。

遇到的问题及解决方法

问题：子组件位于路由器出口时，如何向父组件发送事件？

原因：子组件通过路由器动态加载，可能无法直接访问父组件的实例。

解决方法：

使用@Output事件绑定：

// 子组件
@Component({
  selector: 'app-child',
  template: `<button (click)="sendToParent()">Send to Parent</button>`
})
export class ChildComponent {
  @Output() notifyParent = new EventEmitter<string>();

  sendToParent() {
    this.notifyParent.emit('Hello from child!');
  }
}

// 父组件模板
<router-outlet (notifyParent)="receiveFromChild($event)"></router-outlet>

// 父组件类
export class ParentComponent {
  receiveFromChild(message: string) {
    console.log(message);
  }
}

使用服务：

// shared.service.ts
@Injectable({ providedIn: 'root' })
export class SharedService {
  private messageSource = new BehaviorSubject<string>('default message');
  currentMessage = this.messageSource.asObservable();

  changeMessage(message: string) {
    this.messageSource.next(message);
  }
}

// 子组件
@Component({
  selector: 'app-child',
  template: `<button (click)="sendToParent()">Send to Parent</button>`
})
export class ChildComponent {
  constructor(private sharedService: SharedService) {}

  sendToParent() {
    this.sharedService.changeMessage('Hello from child!');
  }
}

// 父组件
@Component({
  selector: 'app-parent',
  template: `<router-outlet></router-outlet>`
})
export class ParentComponent implements OnInit {
  constructor(private sharedService: SharedService) {}

  ngOnInit() {
    this.sharedService.currentMessage.subscribe(message => console.log(message));
  }
}