Question

我想知道以下是否有可能。问题不仅限于console.info，还包括所有Javascript函数。

<a (click)="console.info(foo)">click me doesn't work</a>

Cannot read property 'info' of undefined

模板似乎只能访问组件属性，因此您必须在Component内为其创建额外的功能：

<a (click)="executeConsole(val)">execute console does work</a>

executeConsole(val) {
  console.info(val);
}

使用React，你可以做类似的事情：

<a onClick={() => console.info('it works')}>it works</a>

Answer 1

您必须声明一个可以访问组件ts代码中的控制台对象的属性，然后调用它。例如......

在你的组件中声明ts ...

public c : any;

在组件构造函数中，将属性设置为控制台对象...

this.c = console;

在您的视图中，您现在可以调用info（）...

<a (click)="this.c.info("Hello world")">click me</a>

Answer 2

您可以为控制台创建服务包装器并将其注入相应的组件中。如果你在构造函数中的typescript中执行此操作，那么它可以自动为您创建一个可以从模板访问的公共成员，因此只需将其添加为构造函数参数即可。

似乎不可能拥有“全球”范围。参见例如here

Answer 3

如何在Angular组件中使用全局变量。

我知道这很旧，但是我认为这会有所帮助。您不必创建包装器方法。您只需要告诉您的组件您要使用的外部全局变量，然后将其映射到您的组件即可。

使用声明关键字：

https://www.typescriptlang.org/docs/handbook/declaration-files/by-example.html

只需在您的组件中编写。

// Import statements...

declare const console;

@Component({
// Your Component Config
})

export class YourComponentClassName {
    public console = console;
}

然后，您的HTML文件中的内容可以使用如下控制台：

<div (click)="console.info('Hello')"> </div>

Angular2从模板点击事件写入控制台

3 个答案:

如何在Angular组件中使用全局变量。