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

Question

为什么这个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;
  }  

}

Answer 1

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

1. 在指令构造函数中注入 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;
}

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