Question

我想将数据从子组件传递到父组件，但是它不能以正确的方式工作：未调用函数。

    <router-outlet (activeElement)='getActive($event)'></router-outlet>
    <div class="myDIV"> 
    <button *ngFor="let i of numberOfButtons" (click)="navigate(i)"  [ngClass]="(i === active) ? 'btn active': 'btn'">{{i}}</button>
    </div>

子组件ts.file

@Output() activeElement = new EventEmitter();
  constructor(private activatedRoute:ActivatedRoute,private getPlanets:GetPlanetsService,private router: Router, private renderer:Renderer2,private elRef: ElementRef) { 
    activatedRoute.params.subscribe(value=>{
      this.fivePlanetIndex=value.id;
      this.activeElement.emit(value.id);
    });
  }

父组件.ts文件

  getActive(i){
    console.log(i); //it is not invoked
  }

Answer 1

Output将通过使用组件选择器而不是router-outlet来工作。因为router-outlet曾经用于渲染多个组件，所以在此处设置所有Input和Output都是没有意义的。

如果您想使用router-outlet并从子组件中捕获事件，则可以使用Observable；子组件发送结果，父组件订阅该结果。

sample.service.ts

// you will use subject to emit event from child
subject = new Subject<any>();
// you will use observable to listen to events from parent
observable = this.subject.asObservable();

child.component.ts

constructor(service: SampleService) {}

// instead of emit function
this.service.subject.next();

parent.component.ts

constructor(service: SampleService) {}

// instead of event listener 
this.service.observable.subscribe();

从子组件到父组件的输出无法正常工作

1 个答案: