Angular子组件@Output传值致父组件重复渲染Header问题求助

嘿，我一眼就瞅到问题所在啦！你之所以会在App组件里重复渲染Header模板，核心原因是你在app.component.html中两次引入了<app-app-header>组件——一次是页面最顶部的独立标签，另一次是在flex容器里带(searchListOutput)事件绑定的那个，这直接导致Header被渲染了两次。

接下来给你一步步修正：

第一步：修复App组件的模板（移除重复的Header引用） #

把app.component.html里重复的<app-app-header>删掉，只保留一个，并把事件绑定加到这个唯一的Header标签上：

<!-- 只保留这一个Header组件，并绑定搜索结果的接收事件 -->
<app-app-header (searchListOutput)="searchListOutput($event)"></app-app-header>

<div style="display: flex;">
  <!-- 这里原来的重复Header组件已移除 -->
  <div>
    <div class="container">
      <h5>Today's recommendations</h5>
      <div *ngIf="searchListParentOutput">
        <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>
</div>

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

<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>

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

第二步：优化Header组件的搜索逻辑（可选） #

我注意到你当前的getList()方法是直接获取全部Issues列表，而非根据用户输入的关键词过滤。如果你的需求是返回匹配搜索关键词的结果，可以调整Header组件的逻辑：

// app-header.component.ts
set selectedObj(newObj) {
  this._selectedObj = newObj.issue_name;
  console.log("Calling happens", newObj);
  if (newObj != null && newObj.issue_name && newObj.issue_name.length > 2) {
    // 将搜索关键词传入getList方法
    this.getList(newObj.issue_name);
  }
}

// 修改getList，支持根据关键词获取结果
getList(searchKeyword?: string) {
  // 有关键词则调用带参数的接口，无则获取全部列表
  const request$ = searchKeyword 
    ? this.bugService.GetIssue1(searchKeyword)
    : this.bugService.GetIssues();
  
  request$.subscribe((data: {}) => {
    this.searchListChild(data);
  });
}

现在再测试一下，Header只会渲染一次，搜索结果也会正确展示在App组件的容器里啦。

内容的提问来源于stack exchange，提问作者bharathi