Angular2模板中点击事件如何在控制台输出

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>

- zurfyx

Answer 1

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

在您的组件 TypeScript 中声明...

public c : any;

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

this.c = console;

根据您的看法，现在您可以调用info()函数...

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

- Ben Cameron

---

哎，我本来还指望有比这更好的东西呢。 - zurfyx

我同意，如果您不更改组件ts代码就能完成它，那将是很好的。 - Ben Cameron

Answer 2

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

否则似乎无法拥有“全局”范围。例如，请参见这里。

- Ilya Chernomordik

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>

- Damian C