Question

为什么＆＃34; getv＆＃34;功能不执行。我试图通过下拉列表获取价值并在自定义指令

中发出其值

我的工作人员是： https://plnkr.co/edit/dIVY8QSyng5naFOBK8uB?p=preview

Home.html中

<div>
  <header [showCaps]="texttransform" (getmodifed)="getv($event)">This is header</header>
  <div>This is mainarea</div>
  <footer>THis is footer</footer>
  <select (change)="getOptionValue($event.target.value)">
    <option data-value="uppercase">Uppercase</option>
    <option data-value="lowercase">Lowercase</option>
  </select>
</div>

Scrpit.ts

import {Component,NgModule,Input,Output,EventEmitter,Directive,ElementRef,Renderer,ViewEncapsulation,AfterViewInit} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';

@Component({
  selector:'firstapp',
  templateUrl:'./home.html'
})

class firstappComponent{
  public headingtitle:string='Dynamic Heading Title';
  public texttransform:string="uppercase";
  @Output() getmodifed=new EventEmitter();
  getOptionValue=function(getit){
    this.getmodifed.emit(getit);
  }
}

@Directive({
  selector:'[showCaps]'
})

class showCapsDirective implements AfterViewInit{
  @Input('showCaps') getdata;
  constructor(private el:ElementRef,private render:Renderer){}

  getv=function(data){
    console.log(data);
    this.render.setElementStyle(this.el.nativeElement,'text-transform',this.data)
  }

}

@NgModule({
  imports:[BrowserModule],
  declarations:[firstappComponent,showCapsDirective],
  bootstrap:[firstappComponent]
})
class app{}
platformBrowserDynamic().bootstrapModule(app)

Answer 1

发射器的目的是仅用于跨组件通信，它不适用于指令和组件通信。

请参阅以下工作代码

＆＃13;

import {Component,NgModule,Input,Output,EventEmitter,Directive,ElementRef,Renderer,ViewEncapsulation,OnChanges} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';

@Component({
  selector:'firstapp',
  templateUrl:'./home.html'
})

class firstappComponent{
  public headingtitle:string='Dynamic Heading Title';
  public texttransform:string="uppercase";
  getOptionValue=function(getit){
    this.texttransform = getit;
    //this.texttransform=getit;
  }
}

@Directive({
  selector:'[showCaps]'
})

class showCapsDirective implements OnChanges{
  @Input('showCaps') getdata;
  constructor(private el:ElementRef,private render:Renderer){
   // render.setElementStyle(el.nativeElement,'text-transform',getdata)
  }
  
  ngOnChanges(){
    console.log(this.getdata);
    this.render.setElementStyle(this.el.nativeElement,'text-transform',this.getdata)
  }
}

@NgModule({
  imports:[BrowserModule],
  declarations:[firstappComponent,showCapsDirective],
  bootstrap:[firstappComponent]
})

class app{}

platformBrowserDynamic().bootstrapModule(app)

＆＃13;

https://plnkr.co/edit/y1F2q0oE6rp5SfsjWxUL?p=preview

Angular 2 - Emit不执行输出功能

1 个答案: