如何在HTML按钮上打开/显示我的组件单击- Angular
如何在HTML按钮上打开/显示我的组件单击- Angular
提问于 2018-07-12 05:36:03
我正在制作简单的应用程序，现在有3个组件，一个父组件，称为主组件，和两个子组件，其中一个子组件显示选定的车辆，这工作正常，但选择完成后，我需要单击我的应用程序中的添加按钮，以打开模式(这是另一个组件)，我应该选择一个客户/客户端，以便我可以标记车辆的选定客户所有权。
它通常看起来是这样的：
所以基本上，当点击add按钮( add按钮是工具箱组件的一部分)时，应该会显示modal (另一个包含客户的组件)，我可以在其中选择一个客户端。
按下add时应显示的组件为：
现在我将发布我的代码：
1.)应容纳客户端的发布组件
×
Clients
Find client by ID
Search for client..
Person 1
Person 2
Person 3
@Component({
selector: 'app-customer',
templateUrl: './customer.component.html',
styleUrls: ['./customer.component.css']
})
export class ClientComponent implements OnInit {
ngOnInit() {
}
}我通常我不知道该怎么做，也许我应该在我的主组件上放一些类似这样的东西：
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
Stack Overflow用户
发布于 2018-07-12 07:18:09
正如您所说的，它很简单，例如在主组件中添加以下内容：
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);
}
}在
您可以添加：
Open现在，因为您使用的是引导模式，所以需要以编程方式打开它，我假设您已经使用了JQuery，并且已经在某个地方定义了它，所以在
你可以这样做：
import {Component, AfterViewInit, OutPut, Input, EventEmitter} from'@angular/core';
export class ChildComponent implements AfterViewInit{
@OutPut()
public onItemSelect: EventEmitter;
@Input()
public items: Array;
constructor(){
this.onItemSelect= new EventEmitter();
}
ngAfterViewInit(){
$('#modal_id').modal('show');
}
selectItem(item){
this.onItemSelect.emit(item);
}
}在ChildComponent的html代码中添加以下内容：
Item我没有测试这段代码，但我只是给出了如何与组件通信的示例，并有条件地显示它们
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51294502
复制相关文章
相似问题