如果它来自指令，是不是可以点击按钮

Posted 2023-02-22

【中文标题】如果它来自指令，是不是可以点击按钮

【英文标题】：Is that possible to make button click if it is from Directive如果它来自指令，是否可以点击按钮

【发布时间】：2019-10-13 22:19:15

【问题描述】：

为什么这个hi() 没有打电话？

Innerhtml 按钮单击不起作用？

此代码在指令内

@HostListener('mouseenter') onMouseEnter() 
 this.el.nativeElement.innerHTML ="<button (click)=hi()>dasdsad</button>";
  this.el.nativeElement.style.backgroundColor = this.hc;

hi() 方法来自 app.component 和 app.component.html

<p appMillahint="pink" dc="yellow" text="name" ml="#9c27b0" me="red" mo="blue">
  Start editing to see some magic happen :) name
</p>

完整代码

import  Directive  from '@angular/core';
import  ElementRef ,HostListener,Input  from '@angular/core'; 
import MatTooltipModule from '@angular/material/tooltip';
import  OverlayModule  from '@angular/cdk/overlay';

@Directive(
  selector: '[appMillahint]'
)
export class MillahintDirective 
@Input('appMillahint') hc: string;
@Input() dc: string;
@Input() mo: string;
@Input() callback2:Function;
@Input() me: string;
@Input() ml: string;
@Input() text: string;
@Input() rt:String; 
  constructor(   private el:ElementRef)  
    el.nativeElement.style.backgroundColor = this.dc;
    this.text="milla";

  


      ngOnInit() 
       this.    el.nativeElement.innerHTML ='<style>'+this.ribbonstyle+'</style><h1 class="ribbon">  <strong class="ribbon-content">'+this.rt+'</strong></h1>';
    
  @HostListener('onmouseover') onmouseover()
  this.    el.nativeElement.style.backgroundColor =this.mo;
@HostListener('mouseenter') onMouseEnter() 
 this.    el.nativeElement.innerHTML ='<style>'+this.ribbonstyle+'</style><h1 class="ribbon">  <strong class="ribbon-content">'+this.rt+'</strong></h1>';


  //this.    el.nativeElement.style.backgroundColor = this.hc;

table=' <style> table   font-family: arial, sans-serif;   border-collapse: collapse;  width: 100%;  td, th  border: 1px solid #dddddd; text-align: left; padding: 8px;  tr:nth-child(even)  background-color: #dddddd;  </style><table>  <tr>   <th>Company</th>  <th>Contact</th>  <th>Country</th>  </tr>  <tr>  <td>Alfreds Futterkiste</td>  <td>Maria Anders</td>  <td>Germany</td>  </tr> <tr>  <td>Centro comercial Moctezuma</td>   <td>Francisco Chang</td>  <td>Mexico</td>  </tr> <tr>   <td>Ernst Handel</td>  <td>Roland Mendel</td>   <td>Austria</td>  </tr> <tr>  <td>Island Trading</td>  <td>Helen Bennett</td>  <td>UK</td>  </tr>  <tr>  <td>Laughing Bacchus Winecellars</td>   <td>Yoshi Tannamuri</td>  <td>Canada</td> </tr> <tr>  <td>Giovanni Rovelli</td>   </tr> </table>';
  ribbonstyle='.ribbon  font-size: 16px !important;  width: 50%; position: relative; background: #ba89b6; color: #fff; text-align: center; padding: 1em 2em; /* Adjust to suit */ margin: 2em auto 3em;    .ribbon:before, .ribbon:after  content: ""; position: absolute; display: block; bottom: -1em; border: 1.5em solid #986794; z-index: -1;  .ribbon:before  left: -2em; border-right-width: 1.5em; border-left-color: transparent;  .ribbon:after  right: -2em; border-left-width: 1.5em; border-right-color: transparent;  .ribbon .ribbon-content:before, .ribbon .ribbon-content:after  content: ""; position: absolute; display: block; border-style: solid; border-color: #804f7c transparent transparent transparent; bottom: -1em;  .ribbon .ribbon-content:before  left: 0; border-width: 1em 0 0 1em;  .ribbon .ribbon-content:after  right: 0; border-width: 1em 1em 0 0; ';

 @HostListener('mouseleave') onMouseLeave() 

    this.    el.nativeElement.innerText="i am milla";
   //  this.    el.nativeElement.style.backgroundColor = this.ml;
    

【问题讨论】：

能否提供完整的指令代码？还有hi()函数定义在哪里？

更新了请查收

如果可能，请分享 Stackblitz

stackblitz.com/edit/angular-directive-my-first-class

答案在***.com/questions/35080387/…。您不能简单地使用 innerHtml="(click)='hi()'"，因为函数“hi”不存在。请记住 Angular 转换为 javascript 和 minimicy。所以java脚本中的函数变成了未知函数。

【参考方案1】：

在 Angular 中，您不能添加这样的模板。进行以下更改。

在指令构造函数中注入 ViewContainerRef 和 ElementRef

constructor(private vc: ViewContainerRef, private tl: TemplateRef, private El: ElementRef<any>) 
 this.vc.createEmbeddedView(this.tl);
 this.el.nativeElement.style.backgroundColor = this.hc;

在 ng-template 中使用指令

<ng-template appMillahint="pink">
   <p dc="yellow" text="name" ml="#9c27b0" me="red" mo="blue">
     Start editing to see some magic happen :) name
   <button (click)=hi()>dasdsad</button>
   </p>
</ng-template>

【讨论】：

“ElementRef”类型的参数不可分配给“TemplateRef”类型的参数。 “ElementRef”类型中缺少属性“elementRef”。 (参数) el: ElementRef

请在这里尝试stackblitz.com/edit/angular-directive-my-first-class 当我尝试你的代码时它不起作用