2 回答

• 3

  一方面，您无法将输入传递给router-outlet标签，因为路由器添加的组件将成为标签的兄弟，并且不会替换它 .

  另一方面，当您的Angular应用程序变得越来越复杂时，将相同的输入从父组件传递给子组件将不再是正确的方法 .

  在您的情况下，处理products变量的最佳方法是将其声明为产品服务中的行为主题：

  prodcuts:Subject<IProducts[]> = new BehaviorSubject<IProducts[]>([]);
  

  在父组件中，您发送收到的数据：

  ngOnInit() { 
      this._productsService.getProducts()
          .subscribe(
            data => {this.products = data;
            this._productsService.prodcuts.next(data);
            },
            error => this.errMsg = error
          );    
  }
  

  最后，在子客户端中，您必须订阅服务中声明的行为主题：

  export class ChildComponent implements OnInit {
  public products = [];
  
  constructor(private _productsService: ProductsService ) { 
  }
  
  ngOnInit() {
      this._productsService.prodcuts
      .subscribe(
        data => {
         {this.products = data;
        }
      );    
    } 
  }
  

  回复于 2024-04-25T16:22:11+08:00
• 4

  是的，这很简单，当你想要传递给 router-outlet 中的组件时，你需要使用 services ，实际上在你走到正确的路径之前模板中不存在该组件，所以通常的绑定在这里不起作用 .

  因此，解决这个问题的最佳方法是创建一些简单的服务

  在服务中

  import { Injectable } from '@angular/core';
  import { BehaviorSubject } from 'rxjs/BehaviorSubject';
  
  @Injectable()
  export class DataTransferService {
  
    private products= new BehaviorSubject<any>([]);
    cast= this.products.asObservable();
  
    sendAnything(data) {
      this.products.next(data);
    }
  
  }
  

  然后将您的服务注入父子组件的两个构造函数中

  在父组件中

  constructor(private dataTransfer: DataTransferService){}
  

  然后创建一个方法

  shareData(data){
      this.dataTransfer.sendAnything(data) // to send something
  }
  

  并使用 . 从parent.component.html调用它

  (click)="shareData(data)" // data is the parent data that you want to share
  

  在子组件中

  在ngOnInit方法中添加：

  ngOnInit() {
     this.dataTransfer.products.subscribe(res=> this.var = res) // var is the property that you want to assign the data to it.
   }
  

  获取数据并使用它 .
  更多信息和示例你可以在doc找到

  回复于 2024-04-25T16:22:11+08:00