Question

这是我的layout.html

<form (ngSubmit)="onSubmit(searchval)" [formGroup]="searchval">
                    <input type="text" class="form-control" required formControlName="Search" placeholder="{{ 'General.Search' | translate }}">
                    <button type="submit"></button>
</form>

在我的layout.component.ts中我有：

onSubmit({ value }: {
        value: Search
    }) {
        this.search.getSearchResult(value.Value);
    }

在那个服务中我正在做http get：

getSearchResult(val: string) {
    this.httpCall.get('/pub/home/search?val=' + val)
        .subscribe(
        data => {
            console.log(data);
        });
}

现在我想将该数据传递给布局组件的子组件。我怎么能这样做？

我想在另一个名为search.component的网页中重定向用户，但我不希望我的搜索字符串位于网址中。所以

mydomain.com/home
mydomain.com/search

而不是

mydomain.com/search?val=something

Answer 1

创建一个共享接口并从child设置值并从parent获取，如下所示：

<强>接口

import {Injectable} from "@angular/core";

export interface SharedModel {
    Name: string;
}

@Injectable()
export class Shared {

    SharedComponent: SharedModel = {
        Name: ''        
    };

    constructor() {       
    }
}

父/子组件：

import {Shared, SharedModel}    from '../Shared';

public sharedData: SharedModel;
constructor(private sharedResource: Shared) {
    this.sharedData = sharedResource.SharedComponent;
}

设置值

this.sharedData.Name="Sandip Patel";

获取价值

console.log(this.sharedData.Name);

Answer 2

使用事件发射器。它将调用父组件方法，您可以在该方法调用中传递您的任何对象，如下所示：

子组件：

import {ViewChild, Component, Output, EventEmitter}   from "@angular/core";

@Output() RefreshParentGridView = new EventEmitter();

public Close(): void {       
     let myObject:any; //Your object which pass in parent
     this.RefreshParentGridView.emit(myObject);               
}

父组件：注册输出事件，如下所示

HTML

<childTeg (RefreshParentGridView)= "RefreshGridView($event)"></childTeg>

后端代码

public RefreshGridView(model: any)
{
}

将值从父级传递给子级

2 个答案: