Manage attribute value scores

Question

The following code works (modulo any typos - the real code is much more complicated). The value of the expression appears in the warning when you click on the DOM element containing this directive.

@Directive({selector: '[alertOnClick]'})
export class AlertOnClick implements OnDestroy {
  @Input('alertOnClick') clickFunction: (() => string);

  @HostListener('click')
  onClick() {
    alert(this.clickFunction());
  }
}

The problem is that it should be called as follows:

<button [alertOnClick]="() => String(new Date())">Time</button>

Edit: It seems that the Angular parser does not support anonymous functions. It must be called by naming the function on the controller.

I want to call it more naturally, something like this:

<button [alertOnClick]="String(new Date())">Time</button>

But if any such variation is displayed each time the button is pressed, the page will be displayed. I cannot have my life determine how to evaluate an expression at a time that I like, and not when the page is displayed. Any suggestions?

Answer 1

:

• <button [alertOnClick]="method(new Date())">Time</button> Date /.

• <button [alertOnClick]="method(createDate())">Time</button> - Date + .

/ factory: <button [alertOnClick]="method(createDate/Date)">Time</button> method createDate() new date(). , .

- args pipe: <button [alertOnClick]="method|args:[Date,new Date()]">Time</button>. -, . , . :

@Pipe({name: 'args', pure: true})
export class ArgsPipe implements PipeTransform {
  transform(method: Function, parameters: any[]): Function {
    return ()=> {
       const args = parameters.forEach(arg => {
            if(typeof arg === 'function') {
                return arg();
            }
            return arg;
       });
       //todo: figure out how to get correct this
       method.apply(this, args);
    };
  }
}

, , () => functionArgument: <button [alertOnClick]="method|args:[someCallback|func,new Date()]">Time</button> - someCallback method .

Answer 2

, - :
<button [alertOnClick]="String(new Date())">Time</button>

<p alertOnClick="String(new Date())">Current time</p>

@Directive({selector: '[alertOnClick]'})
export class AlertOnClick {
  @Input('alertOnClick') message: String;

  @HostListener('click')
  onClick() {
    alert(eval(this.message));
  }
}

, alertOnClick , Javascript eval (ref - MDN) .

, , - . i.e eval , String Date .
.

const evalMe = () => { return String(new Date()) }

<p alertOnClick="evalMe()">Current time</p>

@Directive({selector: '[alertOnClick]'})
export class AlertOnClick {
  @Input('alertOnClick') message: String;

  @HostListener('click')
  onClick() {
    alert(eval(this.message));
  }
}

javascript, .

"Angular " - .
, , plunker. (: Angular2 )

<p [alertOnClick]="evalMethod">Current time</p>

export class App {
  ...    
  evalMethod() {
    console.log("I am being called!")
    return new Date();
  }


@Directive({selector: '[alertOnClick]'})
export class AlertOnClick {
  @Input('alertOnClick') messageFn: Function;

  @HostListener('click')
  onClick() {
    alert(this.messageFn());
  }
}

, , .
, , .

Plunker