如何以角度将值传递给路由器出口答案

【问题标题】：How to pass value to router outlet in angular如何以角度将值传递给路由器出口
【发布时间】：2022-12-07 17:55:02
【问题描述】：

我在标题中搜索。当用户输入内容时。我应该将值传递给动态的路由器插座。我已经尝试使用 @ViewChild 抛出错误。（未定义的错误）请帮助我。

应用程序组件。网页格式

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

【问题讨论】：

标签： angular

【解决方案1】：

听起来您正试图将一个值从 app-header 组件传递到 router-outlet 组件。一种方法是使用服务在两个组件之间共享数据。

首先，创建一个服务，它有一个属性来保存您要传递的值：

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

@Injectable()
export class DataService {
  public value: any;
}

接下来，将服务注入到 app-header 和 router-outlet 组件中，并在用户输入内容时设置 app-header 组件中的属性值：

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-header',
  template: '<input (input)="setValue($event.target.value)">',
})
export class HeaderComponent {
  constructor(private dataService: DataService) {}

  setValue(value: any) {
    this.dataService.value = value;
  }
}

最后，在 router-outlet 组件中，您可以通过读取 dataService 的 value 属性来访问在 app-header 组件中设置的值：

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'router-outlet',
  template: '<div>{{ value }}</div>',
})
export class RouterOutletComponent {
  public value: any;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.value = this.dataService.value;
  }
}

使用服务在组件之间共享数据是 Angular 中的常见模式。它允许您将数据从一个组件传递到另一个组件，而无需定义复杂的父子组件层次结构。

【讨论】：