Question

我是Angular的新手，我正在尝试将子组件中的数组传递给父组件。在子组件中，我有以下内容：

export class AoRSummaryComponent implements OnInit, AfterViewInit, OnDestroy {
 @Output() fooDetails: EventEmitter<any> = new EventEmitter();
...
//then the code that builds the array (this.detailsObj.aorDetails)
...
this.fooDetails.emit(this.detailsObj.aorDetails);

我的问题是，为了在* ngFor =“让fooDetails的详细信息”声明中使用fooDetails，我在父组件html中包含了什么？我似乎无法使用<child-component-selector></child-component-selector>语句，因为我们使用<router-outlet>来加载子组件。任何帮助将不胜感激。

Answer 1

如果所谓的“child”组件通过router-outlet指令在其“parent”内部呈现，那么你就不会真正拥有父子关系。这种情况的典型解决方案是在相关组件之间共享服务实例。

@Injectable()
export class FooService{
  private _value$ = new BehaviorSubject<number>(42);
  ctor(){}

  get value$(){
    return this._value$.asObservable();
  }

  pushData(v: number){
    this._value$.next(v);
  }
}

export class ParentComponent implements OnInit {
 value$: Observable<number>;
 ctor(private _service: FooService){}

 ngOnInit(){
   this.value$ = this._service.value$();
 }

 //Add ngOnDestroy in case that you manually subscribe to value$
}

export class ChildComponent{
  ctor(private _service: FooService){}

  triggerEvent(v: number){
     this._service.pushData(v);
     // this replaces emitter.emit(v)
  }
}

有关此主题的更多信息，请参阅in the docs

如何将路由子项的@Output值转换为父组件Angular 4

1 个答案: