如何在 HTML 按钮单击时打开/显示我的组件 - Angular答案

【问题标题】：How to open/show my component on a HTML button click - Angular如何在 HTML 按钮单击时打开/显示我的组件 - Angular
【发布时间】：2018-12-20 00:39:28
【问题描述】：

我正在制作简单的应用程序，现在有 3 个组件，一个称为 MAIN COMPONENT 的父组件和两个子组件，其中一个子组件正在显示选定的车辆并且工作正常，但是选择完成后我需要点击我的应用程序中的添加按钮，打开模式（这是另一个组件），我应该在其中选择一个客户/客户，以便我可以标记该车辆是选定的客户所有权。

一般情况下是这样的：

所以基本上当单击添加按钮时（添加按钮是工具箱组件的一部分），应该显示模态（另一个包含客户的组件），我可以在其中选择客户端。

按下 add 时应该显示的组件是：customer.component.html

现在我将发布我的代码：

1.) 应该持有客户customer.component.html的发布组件@

<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Clients</h4>
  </div>
  <div class="modal-body item-edit-container">
    <h4 class="modal-title" style="text-align: center;">Find client by ID</h4>
    <div class="form-group">
      <input type="text" class="form-control dash-form-control" id="" placeholder="" autofocus>
      <div style="margin-top: 10px;">
        <select class="form-control dash-form-control select2" style="width: 100%;">
          <option selected disabled>Search for client..</option>
          <option>Person 1</option>
          <option>Person 2</option>
          <option>Person 3</option>
        </select>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn save-keyboard-btn" data-dismiss="modal"></button>
  </div>
</div>



@Component({
  selector: 'app-customer',
  templateUrl: './customer.component.html',
  styleUrls: ['./customer.component.css']
})
export class ClientComponent implements OnInit {
   ngOnInit() {
  }
}

我一般不知道应该怎么做，也许我应该在我的主要组件上放置这样的东西：

<app-customer></app-customer> and somehow show it when I click on button add, but I really don't know how to achieve this? Could anyone write me some simple steps which I might follow or whatever...

谢谢大家干杯

所以请记住我最后的问题很简单，我需要显示一个模式，在单击按钮时代表我的组件..

谢谢干杯

【问题讨论】：

标签： javascript jquery angular bootstrap-modal angular-components

【解决方案1】：

正如你所说，这很简单，例如在主要组件中添加：

import {Component, OnInit} from'@angular/core';
export class MainComponent implements OnInit{
  public shoud_open = false;

  openChildComponent(){
   this.should_open = true;
  }

  itemSelected(item){
    console.log(item);
  }

}

在您添加的MainComponent 的html 中：

<button (click)="openChildComponent()">Open</button>
<div *ngIf="shouldOpen">
   <child-component (onItemSelect)="itemSelected($event)" [items]="persons"></child-component>
</div>

现在因为您使用的是引导模式，您需要以编程方式打开它，我假设您已经在使用 JQuery 并且它已在某处定义，因此在 ChildComponent 中您可以执行以下操作：

import {Component, AfterViewInit, OutPut, Input, EventEmitter} from'@angular/core';
export class ChildComponent implements AfterViewInit{
  @OutPut()
  public onItemSelect: EventEmitter<any>;

  @Input()
  public items: Array<any>; 
  constructor(){
    this.onItemSelect= new EventEmitter<any>();
  }
  ngAfterViewInit(){
    $('#modal_id').modal('show');
  }
  selectItem(item){
   this.onItemSelect.emit(item);
  }
}

在 ChildComponent 的 html 代码中添加：

<select multiple name="items" (change)="selectItem($event)">
  <option *ngFor="let item of items" [value]="item">Item</option>
</select>

我没有测试这段代码，但我只是举例说明如何与组件通信，有条件地显示它们

【讨论】：