在父组件中显示搜索结果

Question

我是 Angular 的新手。我有三个单独的组件标题，应用组件（主），页脚组件。

我在标题组件中有搜索输入。一旦我搜索输出结果应该显示在应用程序组件中。

我已使用@Output 在应用组件中显示结果。

当我使用@Output 时的问题是整个模板都显示在应用组件中，而不是唯一的结果。

如果您检查 app-component，标题组件会再次显示。

代码：

app-header.component.html:

<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 border-bottom shadow-sm">
    <h5 class="my-1 mr-md-5 font-weight-normal">Agri Sell</h5>
    <div class="my-1 mr-md-5 font-weight-normal">
    <input class="form-control location" type="text" maxlength="30" placeholder="Current location"> 

    </div>
    <!-- <div class="my-0 mr-md-auto font-weight-normal">
      <input type="text" formControlName="issue_name" class="my-0 mr-md-auto font-weight-normal" maxlength="30"
        placeholder="Find Rice, Wheat and more" >
      <button class="btn btn-primary mr-4" type="submit">Search</button>
    </div> -->


    <ng-template #bharathi let-r="result" let-t="term">
      <!-- <img [src]="'https://upload.wikimedia.org/wikipedia/commons/thumb/' + r['flag']" class="mr-1" style="width: 16px"> -->
      <ngb-highlight [result]="r.name" [term]="t"></ngb-highlight>
    </ng-template>
    <div class="my-0   mr-md-1 font-weight-normal">

      <input id="typeahead-template" type="text" class="form-control" [(ngModel)]="selectedObj" [ngbTypeahead]="search"
        [resultFormatter]="resultFormatBandListValue" [inputFormatter]="inputFormatBandListValue"  placeholder="Find Rice, Wheat and more"/>
        <!-- (keyup)="getList($event)" /> -->

   </div>
   <div class="my-0  mr-md-auto font-weight-normal">
      <button class="btn btn-primary mr-4" type="submit">Search</button>
      </div>
    <nav class="my-2 my-md-0 mr-md-3">
      <a class="p-2" routerLinkActive="active" routerLink="/issues-list">LOGIN</a>
    </nav>
    <a class="p-2" routerLinkActive="active" routerLink="/add-issue">SELL</a>
    <!-- <a class="btn btn-outline-primary" routerLinkActive="active"
          [routerLink]='[{ outlets: { addIssue: ["add-issue"] } }]'>SELL</a> -->
  </div>

app.header.component.ts：

    import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { Bug } from 'src/app/shared/model/bug';
import { Observable } from 'rxjs';
import { debounceTime, distinctUntilChanged, switchMap, map } from 'rxjs/operators';
import { BugService } from 'src/app/shared/service/bug.service';


@Component({
  selector: 'app-app-header',
  templateUrl: './app-header.component.html',
  styleUrls: ['./app-header.component.css']
})
export class AppHeaderComponent implements OnInit {
  @Output() searchListOutput = new EventEmitter();
  searchList: Bug[];
  searchListChild(data) {
    this.searchList = data;
    this.searchListOutput.emit(this.searchList);
  }
  public _selectedObj: any;
  bugList: Bug[] = [];
  constructor(private bugService: BugService) { }

  ngOnInit() {
  }
  search = (text$: Observable<string>) => {
    return text$.pipe(
      debounceTime(200),
      distinctUntilChanged(),
      distinctUntilChanged(),
      switchMap(searchText =>
        searchText.length < 2 ? [] : this.bugService.GetIssue1(searchText).pipe(map(result => [result])

        ))
    )
  }
  resultFormatBandListValue(value: any) {
    return value.issue_name;
  }

  inputFormatBandListValue(value: any) {
    if (value.issue_name)
      return value.issue_id
    return value;
  }


  get selectedObj() {
    return this._selectedObj;
  }
  set selectedObj(newObj) {
    this._selectedObj = newObj.issue_name;
    console.log("Callign happens" + newObj);
    if (newObj != null && null != newObj.issue_name && newObj.issue_name.length > 2) {
      this.getList();
    }

  }

  getList() {
    this.bugService.GetIssues().subscribe((data: {}) => {

      this.searchListChild(data);
    });
  }
}

app.component.html

    <app-app-header></app-app-header>

<div style="display: flex;">

  <app-app-header (searchListOutput)="searchListOutput($event)">

  </app-app-header>
  <div>
    <div class="container">
      <h5>Today's recommendations</h5>
      <div *ngIf="searchListParentOutput">

        <!-- {{IssuesList | json}} -->
        <div class="row">
          <div *ngFor="let issues of searchListParentOutput" class="col-sm-4 py-2">
            <div class="card  text-black ">

              <div class="card-body text center">
                <h4 class="card-title">{{issues.issue_name}}</h4>
                <h6 class="card-subtitle mb-2">{{issues.issue_number}}</h6>

                <p class="card-text">{{issues.issue_message}}</p>
                <a href="#" class="btn btn-primary">Read more</a>
              </div>

            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
  <router-outlet></router-outlet>
  <router-outlet name='addIssue'></router-outlet>
</div>

<div>
  <!-- translation: translation pipe -->
  <h1>{{ 'demo.title' | translate }}</h1>

  <!-- translation: directive (key as attribute)-->
  <p [translate]="'demo.text'"></p>

  <!-- translation: directive (key as content of element) -->
  <p translate>demo.text</p>
  <button (click)="switchLanguage('en')">en</button>
  <button (click)="switchLanguage('fr')">de</button>
</div>


<div>
  <app-app-footer></app-app-footer>

</div>

app.component.ts

import { Component } from '@angular/core';
import { BugService } from './shared/service/bug.service';
import { TranslateService } from '@ngx-translate/core';



@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  // Setting the default language of the application.

  searchListParentOutput: any;
  searchListOutput($event) {
    this.searchListParentOutput = $event;
  }
  constructor(private translate: TranslateService, public bugService: BugService) {
    translate.setDefaultLang('en');
  }

  // Method to change the language.
  switchLanguage(language: string) {
    console.log("Language" + language);
    this.translate.use(language);
  }

  // search = (text$: Observable<string>) =>
  //   text$.pipe(
  //     debounceTime(200),

  //     map(term => term === '' ? []
  //       : statesWithFlags.filter(v => v.name.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10))
  //   )
  // formatter = (x: {name: string}) => x.name;



}

Answer 1

因为您调用了两次app-app-header 组件。在app.component.html。

从顶部删除<app-app-header></app-app-header>。 只需将<app-app-header (searchListOutput)="searchListOutput($event)"></app-app-header> 放在 app.component.html 的顶部

你必须使用searchListParentOutput，你现在得到数据，在app.component.html中相应地创建html并显示该数据。