代码之家 › 专栏 › 技术社区 › Roxy'Pro

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

angular-components bootstrap-modal angular jquery javascript

Roxy'Pro · 技术社区 · 8 年前

大体上是这样的:

按add时应显示的组件是: customer.component.html

现在我将发布我的代码:

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

谢谢你们干杯

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

干杯

1 回复 | 直到 8 年前

Hussein 8 年前

正如你所说的很简单,例如在主组件中添加以下内容:

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 您可以添加:

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前