TypeScript中的共享按钮组件,但事件并非对所有页面可见(Angular 4)

苏希尔·古普塔(Sushil Gupta)

在Angular 5中,有两个页面使用的共享按钮组件。第1页和第2页。但是click事件仅对page1可见。不知道我是否在这里想念什么。下面显示的是组件层次结构的完整结构。

Index.html
   App.html
      page1.html
            btn.html
      page2.html  
            btn.html

btn.html组件对于page1和page2是通用的。问题是仅在page1.html上执行btn.component.ts的按钮单击事件。page2.html不知道此事件。

我已经创建了这个代码,以显示我的问题。

https://plnkr.co/edit/Ry5Uj2VHzVK0RfaJcXyZ?p=info

请在这里帮助我。如何解决此问题?还是我在这里做什么错。谢谢。

普拉奇

可能是click事件仅绑定到该组件的第一个实例。因此您可以尝试以下操作:

在btn共享组件html中:

<div>
  <label>This is test button</label>
  <input type="button" id="Testbtn" value="Click me" (click)="FunctionOnClick()"> 
</div>

在btn共享组件ts中:

import { Component } from '@angular/core';

@Component({
  selector: 'btn-shared',
  templateUrl: 'src/shared/btn.component.html'
})
export class btnComponent {

public FunctionOnClick(){
  alert("Clicked ");
}

}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

卡组件中具有单击事件的Bootstrap 4按钮

来自共享模块的服务不可见-Angular 4

组件中的Angular 4 HttpClient无法解析所有参数

Bootstrap 4 折叠按钮不可见

在带有Angular的Ionic 4中使用Slider看不见Slide中的组件

查找恰好有4个选项的所有可见选择

在页面中隐藏div,使其仅在打印引导程序4上可见

无法捕获Angular 4中子组件发出的事件

如何处理 angular4 中组件上的所有点击?

angular4 更改检测更新 ngfor 中的所有组件

直到我在Angular4中显示数据,文本框才可见

Swift 4如何从日历中获取所有事件?

材质单选按钮更改事件Angular 4

电子邮件属性不可见,在带有强大参数的Rails 4中

使复选框始终在Bootstrap 4中可见

bootstrap 4 中的 SVG 行,flex div 不可见

在Bootstrap v4中缺少可见**和隐藏**

使.well-known目录在Express 4中可见

在Ionic 4中将Webkit-背面可见性添加到离子按钮

带有嵌套组件的Bootstrap表在angular4中

(Sun)JDK并非所有TTF字体都可见

Angular 4 隐藏按钮

RecyclerView中并非总是可见的按钮上的OnClickListener

如何在angular v4 ts中共享变量并跟踪它在多个组件中的变化

Angular4 将数据共享给子组件

Angular 4 共享组件在每次加载时创建新实例

Angular 4-无法通过服务在组件之间共享数据

如何在不禁用 angular (v4) 中的提交按钮的情况下触发所有验证?

Angular 4-在没有EventEmitter的情况下访问子组件的事件