Angular 4：将数据从动态模态输出到组件答案

【问题标题】：Angular 4: Output data from dynamic modal to componentAngular 4：将数据从动态模态输出到组件
【发布时间】：2018-02-15 13:03:30
【问题描述】：

我正在使用材料设计并设置了一个用于动态加载 MdDialog 的 dialogService。我正在尝试使用搜索过滤器创建一个搜索对话框，当提交时它会将您带到搜索结果组件路径。而且我不知道如何将搜索数据输出到搜索结果组件。

./dialog-service.ts

@Injectable()
    export class DialogService {
    private dynamicModalComponent: DialogComponent;

    public init(dynModal: DialogComponent) {
        this.dynamicModalComponent = dynModal;
    }

    public show(component: Type<any>, configuration?: MdDialogConfig) {
        this.dynamicModalComponent.showModal(component, configuration);
    }

    public hide() {
        this.dynamicModalComponent.hideModal();
    }
}

./modules/search.component.html

<div class="search-component">
<h2>Search</h2>
<md-input-container class="full-width search">
    <input mdInput placeholder="search" color="primary" />
</md-input-container>
<div class="radio-groups">
    <md-radio-group class="radio-buttons" [(ngModel)]="searchFilterValue">
        <md-radio-button class="r-button" [value]="sf.value" *ngFor="let sf 
of searchFilter">
            {{sf.name}}
        </md-radio-button>
    </md-radio-group>
</div>
<md-dialog-actions class="actions">
    <button md-button (click)="hide()">Cancel</button>
    <button md-raised-button (click)="search()" 
          color="primary">Search</button>
</md-dialog-actions>
</div>

./modules/search.component.ts

import {Component, OnInit} from "@angular/core";
import {DialogService} from "../dialog/dialog.service";
import {Router} from "@angular/router";
@Component({
    selector: 'search',
    templateUrl: './search.component.html',
    styleUrls:['./search.component.scss']
})
export class SearchComponent implements OnInit {
searchFilterValue;
searchFilter = [
    {
        name: 'Groups',
        value: 'groups',
    },
    {
        name: 'People',
        value: 'users',
    },
    {
        name: 'Events',
        value: 'events',
    },
    {
        name: 'Posts',
        value: 'posts',
    }
];
constructor(private _dialogService: DialogService,
            private router: Router){
    this.searchFilterValue = 'groups';
}

ngOnInit(){}

hide() {
    this._dialogService.hide();
}

search() {
    this.hide();
    this.router.navigate(['/search']);
}
}

【问题讨论】：

标签： javascript angular typescript material-design

【解决方案1】：

您有多种选择：

1) 您可以使用可选或查询路由参数。然后作为router.navigate 的一部分，您还将传递参数。如果您需要将数据从这个组件直接传递到另一个组件，这是一个很好的选择。

2) 另一种选择是构建服务。该服务保留搜索过滤器值。搜索组件将值设置到服务中，然后该组件从服务中读取值。

这些选项之一听起来对你有用吗？

【讨论】：

【解决方案2】：

您可以为隐藏/关闭事件定义一个输出事件，并将结果作为事件参数传递。其他组件可以订阅此类事件来处理结果。

【讨论】：