Javascript 将布尔值传递给另一个角度组件

我有两个角分量

results.table和results.query

当用户单击results.query.component中的reset按钮时，我想将表隐藏在results.table.component中

也许我在事件发射器上做得不对，或者可能有更好的方法来做这件事

results.table HTML

<div *ngIf='results?.length>0'>
  <table *ngIf="showResults" class='table'>
    <tr>
      <th>Result Name</th>
      <th>Location</th>
    </tr>
    <tbody>
    <ng-template ngFor let-results [ngForOf]='items' let-i="index">
      <tr>
        <td>
          <span>{{result?.description}}</span>
        </td>
        <td>
          <span>{{result?.location}}</span>
        </td>
      </tr>
    </ng-template>
    </tbody>
  </table>
</div>

<app-results-query (showResults)="changeShowResults($event)"></app-results-query>
<table *ngIf="showResults">
    //table stuff
</table>

results.queryhtml

<div class="panel-body">
      <form (submit)="onSubmitClicked()">
        <div class="row">
          <div class="form-group col-md-12 col-xs-12">

            <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
              <label class="col-md-12 col-xs-12 control-label  no-margin no-padding">Location: </label>
              <pg-radio-toggle-select class="col-md-12 col-xs-12 no-margin no-padding" name="locationChangeInput" [(ngModel)]="Location"
                (selectedChanged)="onFilteringLocation($event)" [options]='locationOptions'>
              </pg-radio-toggle-select>
            </div>

            <pg-inputfield name="description" class="col-xs-12 col-sm-3 col-md-3 col-lg-3" [(ngModel)]="paramsModel.description"
                           displaytext="Name:"></pg-inputfield>
          </div>
        </div>

        <div>
          <button type="reset" class="btnReset" (click)="reset()">Reset</button>
          <button type="submit" name="btnSearch">Search</button>
        </div>
      </form>
    </div>

地点：
重置
搜寻

results.queryts

import {Component, OnInit, EventEmitter, Output} from '@angular/core';
import * as _ from 'lodash';
import { LocationService } from '../location-service.service';

@Component({
  selector: 'result-query',
  templateUrl: './result-query.component.html',
  styleUrls: ['./result-query.component.less'],
})
export class ResultQueryComponent implements OnInit {
  @Output() showResults:  EventEmitter<boolean> = new EventEmitter<boolean>();

  constructor(
      private LocationService: LocationService,
  ) {
    this.reset();
  }

  ngOnInit() {
    this.reset();
  }

  onSubmitClicked() {
    console.log('test')
  }

  reset(): void {
    console.log('I am the reset king');
    this.showResults = false;
    this.showResults.emit(true);
    this.onSubmitClicked();
  }
}

从'@angular/core'导入{Component，OnInit，EventEmitter，Output}；
从“lodash”导入*as uuu；
从“../location service.service”导入{LocationService}；
@组成部分({
选择器：“结果查询”，
templateUrl:'./result query.component.html'，
styleUrls:['./结果查询.component.less']，
})
导出类ResultQueryComponent在NIT上实现{
@Output（）showResults:EventEmitter=新的EventEmitter（）；
建造师(
专用定位服务：定位服务，
) {
这是reset（）；
}
恩戈尼尼特（）{
这是reset（）；
}
onSubmitClicked（）{
console.log（'test'）
}
重置（）：无效{
log（“我是重置之王”）；
this.showResults=false；
this.showResults.emit（true）；
this.onSubmitClicked（）；
}
}

如果两个组件确实具有父子关系，则可以使用@Input（）@Output（）修饰符

父组件

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { Stephen } from '../stephen.model';

@Component({
    selector: 'app-parent',
    template: `

        Hello, Mr. (or Ms.): {{ selectedName }}

`,
styleUrls: ['./parent.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class ParentComponent implements OnInit {
    stephen: Stephen;
    selectedName: string;

    constructor() {
        this.stephen = new Stephen();
        this.selectedName = this.stephen.firstName;
    }

    ngOnInit() {
    }

    updateName(selectedName: string): void {
    console.log('in parent');
    this.selectedName = selectedName;
    }

}

import { Component, OnInit, ViewEncapsulation, Input, Output, EventEmitter } from '@angular/core';
import { Stephen } from '../../stephen.model';
@Component({
    selector: 'app-child',
    template: `
        {{ stephen.firstName }}
        {{ stephen.lastName }}
        {{ stephen.fullName }}
        `,
    styleUrls: ['./child.component.css'],
    encapsulation: ViewEncapsulation.None
})
export class ChildComponent implements OnInit {
    @Input() stephen: Stephen;
    @Output() onNameSelected: EventEmitter;
    constructor() {
        this.onNameSelected = new EventEmitter();
    }
    ngOnInit() {
    }
    clicked(name: string): void {
        this.onNameSelected.emit(name);
    }
}

子组件

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { Stephen } from '../stephen.model';

@Component({
    selector: 'app-parent',
    template: `

        Hello, Mr. (or Ms.): {{ selectedName }}

`,
styleUrls: ['./parent.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class ParentComponent implements OnInit {
    stephen: Stephen;
    selectedName: string;

    constructor() {
        this.stephen = new Stephen();
        this.selectedName = this.stephen.firstName;
    }

    ngOnInit() {
    }

    updateName(selectedName: string): void {
    console.log('in parent');
    this.selectedName = selectedName;
    }

}

import { Component, OnInit, ViewEncapsulation, Input, Output, EventEmitter } from '@angular/core';
import { Stephen } from '../../stephen.model';
@Component({
    selector: 'app-child',
    template: `
        {{ stephen.firstName }}
        {{ stephen.lastName }}
        {{ stephen.fullName }}
        `,
    styleUrls: ['./child.component.css'],
    encapsulation: ViewEncapsulation.None
})
export class ChildComponent implements OnInit {
    @Input() stephen: Stephen;
    @Output() onNameSelected: EventEmitter;
    constructor() {
        this.onNameSelected = new EventEmitter();
    }
    ngOnInit() {
    }
    clicked(name: string): void {
        this.onNameSelected.emit(name);
    }
}

重要-第二个解决方案

但在您的案例中，这两个组件似乎没有父子关系。如果要在两个组件之间共享数据，可以创建可共享的服务。此服务将包含和EventEmitter，需要最新更改的组件将在ngOnInit方法中向其订阅，并且具有最新数据的组件将从该可共享服务调用函数以发出该事件

可共享服务

import { Injectable, Output, EventEmitter } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MessengerService {

  @Output() change: EventEmitter<any> = new EventEmitter();

  sendData(data: any): any {
    this.change.emit(data);
  }

}

---

具有新更改的组件将调用sendData方法是messenge/share-able服务，以便在需要时向事件订阅者发布新数据。

我不知道您是否忘记在问题中写入新数据，但您的results.Table HTML中应该有results.query标记，并通过它调用输出。考虑到您的选择器是应用程序结果查询，它将如下所示：

results.table HTML

<div *ngIf='results?.length>0'>
  <table *ngIf="showResults" class='table'>
    <tr>
      <th>Result Name</th>
      <th>Location</th>
    </tr>
    <tbody>
    <ng-template ngFor let-results [ngForOf]='items' let-i="index">
      <tr>
        <td>
          <span>{{result?.description}}</span>
        </td>
        <td>
          <span>{{result?.location}}</span>
        </td>
      </tr>
    </ng-template>
    </tbody>
  </table>
</div>

<app-results-query (showResults)="changeShowResults($event)"></app-results-query>
<table *ngIf="showResults">
    //table stuff
</table>

---

您可以发布您的

结果。表
组件的完整html吗？我的意思是我们想知道
results.table
组件的html和
results.query
是如何关联的？i、 e.如何呈现这两个组件？i、 e.父母/子女或其他。根据您的代码，我们将能够提供答案。@user2216584我已经添加了完整的结果。table谢谢您的帮助结果。table html代码很好。我要求向我们展示与results.table html和results.query html相关的代码。我指的是将这两个HTML放在一起的模板。通过查看results.query TS，您的HTML之间似乎存在父/子关系。提供将这两个HTML显示在一起的代码将使我们能够深入了解，从而为您提供更好的解决方案。@user2216584现已更新！非常抱歉，您仍然没有共享显示results.table和results.query组件之间关系的模板。让我再试一次-您有来自ResultQueryComponent的选择器，同样，您也有来自ResultTableComponent的选择器。这两个选择器在您的页面中是如何显示的？是这样的吗？通过查看共享代码，很难知道这两个组件是如何关联/呈现的。我已经将结果绑定到HTML，我已经更新了描述中的代码，因为正如我所看到的，结果表组件与结果查询组件没有任何关系。如果在results.query中发出showResults事件，则不会更改results.table中的任何内容。要执行此处的操作，results.query必须是result.table的子级，如我在上面键入的示例代码中所示。下面是一个了解输出事件用法的简单示例：