Javascript 如何在HTML按钮上打开/显示我的组件单击-角度

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

一般情况下是这样的：

所以基本上，当单击add按钮时（add按钮是工具箱组件的一部分），应该会显示modal（另一个容纳客户的组件），我可以在其中选择客户机

按下add时应显示的组件是：

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() {
  }
}

现在我将发布我的代码：

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() {
  }
}

&时代；
客户
按ID查找客户端
搜索客户端。。
第一人
第二人
第三人
@组成部分({
选择器：“应用程序客户”，
templateUrl:“./customer.component.html”，
样式URL:['./customer.component.css']
})
导出类ClientComponent实现OnInit{
恩戈尼尼特（）{
}
}

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

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

并在单击“添加”按钮时以某种方式显示，但我真的不知道如何实现这一点？谁能给我写一些简单的步骤，我可能会遵循或什么。。。

谢谢各位 干杯

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

谢谢

---

干杯

正如您所说，这很简单，例如，在主组件中，您添加了以下内容：

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);
  }

}

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

在

main组件的html中添加：

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

在ChildComponent的html代码中添加以下内容：

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);
  }

}

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


项目

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