角2 - 出力関数を実行しません。

Question

"getv"関数が実行されないのはなぜですか？私は、ドロップダウンリストを通じて値を取得し、カスタムディレクティブで

私の作業plnkrを、その値を放出しようとしています： 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

エミッタ目的iコンポーネント間の通信だけでは、ディレクティブとコンポーネント通信では機能しません。

助けのための作業のコード次

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)

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