从HTML调用静态TypeScript函数

Question

I want to call a static class method/function from out of my HTML in Angular 7. This function is not in the component.ts but in a separate general class file message.ts . An error is displayed on the console :

TypeError: Cannot read property 'msg1' of undefined.

Template:

<div>
  {{ Message.msg1({ 'x': 'abc', 'y': 'def' }) }}
</div>

message.ts :

import { Injectable } from '@angular/core';

    @Injectable({
        providedIn: 'root'
    })
    export class Message {

        constructor() { }

        public static msg1 (items: []): string {
          // some code
        }
    }

Is what I want possible ? If yes, how can I get the message file (and so the Message class) in scope of the HTML?

Answer 1

Static methods are accessible on the class , not the instance injected by DI. If you want that template code to work, you'd have to do eg

import { Message } from ".../message";

@Component(...)
class Whatever {
  Message = Message;

   ...
}

to make the class available as Message in the template scope.

That said, it's unclear why that method is static, or what the point of an injectable service with only a static method is.