Angular 5数据从组件的一个子组件访问组件

Posted 2021-05-04

我有以下组件结构;

• RecipeDetailComponent
• RecipeListComponent RecipeItemComponent（此Component是RecipeList的子代）
• RecipeComponent

并希望将数据RecipeItemComponent传递给RecipeDetailComponent。这样做的主要方法是在RecipeItemComponent创建@Output（），从RecipeListComponent获取数据并使用@Output（）。最后使用属性绑定通过RecipeComponent使用@input（）从RecipeDetailComponent获取数据。

有没有有效的方法或简单的方法来做到这一点？我们是否必须跨越父组件才能将数据从子级1获取到RecipeDetailComponent？

提前致谢

答案

我的解决方案是创建一个常见的Recipe服务，它已将passParam作为Subject类型的对象，并在父组件和子组件中注入此服务，当我去导航到子组件时，我将通知

/// service 


export class SharedService {
  passedParamter: Subject<any> = new Subject<any>();

  notify(data) {
    this.passedParamter.next(data);
  }
}


//// in parent Component

@Component({
    ...,
   providers:[SharedService]
})

export class RecipeListComponent implements OnInit {
   constructor(private SharedService: SharedService){}

   ngOnInit() {
   }

   navigateToChild() {
       this.SharedService.notify(data);
   }
}


//// in child Component

.
.
.
export class RecipeItemComponent implements OnInit {
    constructor(private SharedService: SharedService){}
    ngOnInit() {
        this.SharedService.passedParamter.subscribe(
           data => {
                /// here you will recive the data
            }
        )
    }
}