Question

目前我正在使用组件，所以我面临的问题是我有索引组件，通过索引组件我想显示搜索组件及其模板，让我们更深入，这是index.html

index.component.ts

 export class LandingPageComponent {
    constructor(private router: Router) {}

    searchData:Object=[];


    onIndustryChange(event:string) {
        this.searchData[1]=event;
    }

    onlocationChange(event:string) {

        this.searchData[0]=event;


    }

    searchJobs(){
        //navigate to find compnennt and call the search method in find component
 based on the **searchData** of this component i.e index component
        this.router.navigate(['/find']);


    }

在选择城市和行业时，将路由用户以查找完全相同的页面并显示结果

find.component.ts

    export class find implements  OnInit {
  onlocationChange(event:string) {

    this.searchData[0]=event;


  }
 onIndustryChange(event:string) {
        this.searchData[1]=event;
    }

    search()
    {
       //want to call this function and getting data?        }

现在主要部分是在我的 index.html 上点击搜索按钮，如何导航到 find.html 并调用搜索功能（）以及我在 index.component 中的My array searchData 中的数据，我知道一个解决方案，那就是为制作两个不同的组件找到，但我想要一个更好的解决方案

Answer 1

使用共享服务。在导航离开索引页面之前，将数据（此处为使用对象）存储到共享服务。

在=YEAR(A2+1-WEEKDAY(A2))&TEXT(INT((A2-WEEKDAY(A2)-DATE(YEAR(A2+1-WEEKDAY(A2)),1,7))/7)+2,"00")组件中，从构造函数中的共享服务中检索数据。要记住的重要是将模块级别的服务定义为提供者，因为如果在组件级别声明提供者，您将拥有两个单独的服务实例，这意味着组件将无法访问同一个对象。我们来做一个演示：

包含两个简单输入字段的索引页：

find

在您的TS中，创建一个对象并使用值将该对象传递给共享服务。请记住在构造函数中注入服务：

<input [(ngModel)]="city" /><br>
<input [(ngModel)]="industry" /><br>

您的服务如下：

constructor(private service: Service){ }

passData() {
  this.service.emitObject({city: this.city, industry: this.industry});
  // now navigate to find component
}

使用Observables。然后，find组件在OnInit中订阅此observable：

@Injectable()
export class Service {

  private sharedObject = new Subject<Object>();

  sharedObject$ = this.sharedObject.asObservable();

  emitObject(obj: Object) {
    this.sharedObject.next(obj);
  }
}

在这里，您可以使用sharedObject: Object; constructor(private service: Service) { } ngOnInit() { this.service.sharedObject$.subscribe(obj => { this.sharedObject = obj; }); }绑定视图中的值，在本例中为输入字段：

[(ngModel)]

这是一个

Demo

Answer 2

这是一种非常常见的情况。它应该如下处理，布局

<landing-page> 
        <search-component (applySearch)="applySearch($event)"> </search-component>
        <search-results [searchCriteria]="searchCriteria" *ngIf="searchCriteria"> </search-results>
    </landing-page>

LandingPageComponent.ts文件

applySearch(SearchByValue:any){

    this.searchCriteria = SearchByValue;
}

在SearchResultsComponent中，只要输入属性发生更改，onchange就会被触发将searchCriteria作为输入属性

@Input() searchCriteria:Object[];

ngOnChanges(changes:SimpleChange){

    //make request and get the matching data and bind to 
    this.searchedResults =  //data coming from the service resul()
}

在SearchComponent中声明一个输出变量

@Output applySearch:EventEmitter<T> =new EventEmitter<T>();

按钮单击搜索组件中的事件

 // below variable contains the two searchData
 searchData:Object=[];

this.applySearch.emit(searchData)

Answer 3

根据您的要求，您无需导航到其他页面即可显示结果。只需在索引组件中显示它们。有一些必要的步骤来实现它

有一个局部变量来保存结果（jobs）。它最初应该是空的
使用jobs

*ngFor

在搜索时，发出ajax请求以获取数据并更新jobs

以下是您的组件的外观

   import 'rxjs/add/operator/toPromise';

    export class LandingPageComponent {
        constructor(private http: Http) {}
        jobs = [];
        industry:string;
        location:string;

        searchJobs(){
            var params = {
                industry: this.industry,
                location: this.location
            };
            this.http.get('url', {params: params})
              .toPromise()
              .then(function(result){
                       // update the array with found jobs
                       this.jobs = result.data;
                    });
        }

和*ngFor模板的一部分：

// you can put country and location dropdown here
<ul>
   <li *ngFor="let job of jobs">
       {{job.name}}
   </li>
</ul>

我强烈建议您按照official angular website上的教程进行操作。它肯定会让你在angular2

调用另一个组件并显示其html Angular2

3 个答案:

Demo