Question

需要在父组件级别进行路由。无法在子级使用查询参数进行路由。我需要从子级到父级并在父级组件设置路由时执行事件发射器。因为子组件是共享组件。

/// parent.html

    <child-shared-comp></child-shared-comp>
    .........................
    child-shared-component.ts

    func(dateSelected:date){
    If(condition statisfy){
    then should enable routing to another page
    using query params   { queryParams: date }
    }

    }

在子组件中单击func（）时，包括父组件在内的整个页面都应更改（我的意思是路由到另一页面）。

Answer 1

一种实现此目的的方法是向子组件添加一个Output，该子组件在函数“ func（）”触发时发出，这是在子组件与父组件之间进行通信的好方法。

示例：


/// parent.html

    <child-shared-comp (dateSelected)="dateSelected($event)"></child-shared-comp>

// parent.component.ts
    ...
    dateSelected(selectedDate: Date) {
      //routing {queryParams: selectedDate}
    }

//child-shared-component.ts

    import { Output, EventEmitter } from '@angular/core';

    @Output() dateSelected: EventEmitter<Date> = new EventEmitter<Date>();

    func(dateSelected: Date){
     If(condition statisfy){
       this.dateSelected.emit(dateSelected);
     }
    }

有关输出的更多信息： https://angular.io/guide/template-syntax#input-and-output-properties

Angular：-根据子组件值路由父组件

1 个答案: