时间戳

首页 > 解决方案 > Angular:- 基于子组件值的父组件路由

angular - Angular:- 基于子组件值的父组件路由

问题描述

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

/// 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() 时，包括父组件在内的整个页面都应该更改（我的意思是路由到另一个页面）。

标签： angular

解决方案

实现这一点的一种方法是向子组件添加一个输出，该输出在函数“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

推荐阅读