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

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，并调用函数 search ()和我在数组searchData中的数据，我知道一个解决方案，那就是为创建两个不同的组件，用于查找E 219，但是我想要一个更好的解决方案。

Answer 1

使用共享服务。在从索引页面导航之前，将数据(在这里使用对象)存储到共享服务中。

在find组件中，从构造函数中的共享服务中检索数据。要记住的重要是将模块级的服务定义为提供程序，因为如果在组件级别声明提供程序，则将有两个服务的单独实例，这意味着组件将不能访问同一个对象。所以让我们做一个演示：

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

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

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

constructor(private service: Service){ }

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

您的服务如下所示：

@Injectable()
export class Service {

  private sharedObject = new Subject<Object>();

  sharedObject$ = this.sharedObject.asObservable();

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

使用可观测的。然后，find组件订阅OnInit中可观察到的内容：

sharedObject: Object;

constructor(private service: Service) { }

ngOnInit() {
  this.service.sharedObject$.subscribe(obj => {
     this.sharedObject = obj;
  });
}

在这里，您可以使用[(ngModel)]绑定视图中的值，在本例中是输入字段：

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

这里有一个

演示

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中，当输入属性被更改时，将searchCriteria作为输入属性作为输入属性时，onchanges将被触发。

@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

使用您的需求，您不需要导航到另一个页面来显示结果。只需在索引组件中显示它们。要实现这一目标，需要采取一些必要步骤。

1. 有一个局部变量来保存结果(jobs)。一开始应该是空的
2. 使用jobs在模板中显示*ngFor数组
3. 在搜索时，发出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>

我强烈建议您遵循关于官方角网站的教程。它肯定会让您在使用angular2时选择正确的路径。