[英]Angular 4: Output data from dynamic modal to component
我正在使用材質設計,並設置了一個dialogService用於動態加載MdDialog。 我正在嘗試創建一個包含搜索過濾器的搜索對話框,提交后將您帶到搜索結果組件路線。 而且我不知道如何將搜索數據輸出到搜索結果組件。
./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']);
}
}
您有幾種選擇:
1)您可以使用可選或查詢路由參數。 然后,作為router.navigate
一部分,您還將傳遞參數。 如果需要將數據從該組件直接傳遞到另一個組件,這是一個很好的選擇。
2)另一個選擇是建立服務。 該服務保留搜索過濾器值。 搜索組件將值設置到服務中,然后組件從服務中讀取值。
這些選項之一聽起來像它們可以為您工作嗎?
您可以為hide / close事件定義一個輸出事件,並將結果作為事件參數傳遞。其他組件可以訂閱該事件以處理結果。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.