Question

我有一个带路由器插座的父组件。我想用子事件调用父函数。我了解@Input（）和@Output，但是如何将它们与路由器出口配合使用

<router-outlet (tapVocab)="openVocabModal($event)"></router-outlet>

似乎对我没用。在我的孩子中，我有：

@Output() tapVocab = new EventEmitter<string>();

callParent(val) {
    console.log('calling parent', val);
    this.tapVocab.next(val);
  }

Answer 1

使用router-outlet加载的组件不能作为使用输入/输出机制注入模板的组件处理。

您需要实施共享服务，该服务应提供父子之间的通信流。

示例：


@Injectable()
export class MyService{

  private data$: Subject<any> = new Subject<any>();

  next(data:any):void {
    this.data$.next(data);
  }

  select(): Observable<any> {
    this.data$.asObservable();
  }

}

您需要知道将此服务注入您的组件并观看/推送数据并将其扔出

Answer 2

来自angular

<router-outlet>充当Angular动态填充的占位符根据当前路由器状态。

<router-outlet>没有提供将数据绑定到加载的组件或向其发出事件的方法。

但是它有两个事件：

activate —在实例化新组件时发出。

deactivate —在销毁组件时发出。

<router-outlet (activate)="componentAdded($event)" (deactivate)="componentRemoved($event)"></router-outlet>

但是我认为这对您的情况没有帮助。

但是您可以像使用服务在两个不相关组件之间进行任何其他通信一样进行通信。

common.service.ts：

@Injectable()
export class CommonService {
  private data = new BehaviorSubject('default data');
  data$ = this.data.asObservable();

  changeData(data: string) {
    this.data.next(data)
  }
}

app.component.ts：

@Component({
  selector: 'app-component',
  template: `<p>{{data}}</p>`
})
export class AppComponent implements OnInit {

  data: string;

  constructor(private service: CommonService) { }

  ngOnInit() {
    this.service.data$.subscribe(res => this.data = res)  //read the invoked data or default data
  }

}

child.component.ts：

@Component({
  selector: 'app-component-two',
  template: `
    <p>{{data}}</p>
    <button (click)="newData()">Next Data</button>`
})
export class ComponentTwoComponent implements OnInit {

  data: string;

  constructor(private service: CommonService) { }

  ngOnInit() {
    this.service.data$.subscribe(res => this.data = res)
  }
  newData() {
    this.service.changeData('Changed Data');  //invoke new Data
  }
}

将数据从子级传递到路由器出口内的父级

2 个答案: