如何在 Angular Web 组件上调用方法（自定义元素）
我创建了一个如下所示的 Angular Web 组件
@Component({
selector: 'dlx-slider',
templateUrl: './slider.component.html',
styleUrls: ['./slider.component.scss'],
encapsulation: ViewEncapsulation.Native,
})
export class SliderComponent implements OnInit {
open() {
console.log('open');
}
close() {
console.log('close');
}
}
在我的应用程序模块中
export class AppModule {
constructor(private injector: Injector) {
}
ngDoBootstrap() {
this.defineElement(SliderComponent, 'dlx-slider');
}
private defineElement(component: any, elementName: string) {
const el = createCustomElement(component, { injector: this.injector });
customElements.define(elementName, el);
}
}
一切正常，我已将其嵌入到一个简单的HTML页面中，如下所示
<head>
<meta charset="utf-8">
<title>TMIBot</title>
<base href="/">
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, user-scalable=no">
<title>Test Angular Elements</title>
<link rel="stylesheet" href="https://urltomy/dist/dlx-styles-1.0.css">
</head>
<body>
<button id="button">Open Slider </button>
<dlx-slider id="slider"></dlx-slider>
<script type="text/javascript" src="https://urltomy/dist/dlx-chatbot-1.0.js"></script>
</body>
</html>
现在我想对它调用 open 方法。我找不到办法
<script>
const button = document.querySelector('#button');
button.addEventListener('click', () => {
console.log('button Click');
const slider = document.querySelector('#slider');
console.log(slider);
slider.open();
});
</script>
共有3个答案
我和你遇到了同样的问题。像上面的例子那样使用二传手是行不通的。但是如果你在 setter 上添加了 @Input（），你可以调用该 setter 来调用你的方法。
@Component({
selector: 'slider',
templateUrl: './slider.component.html',
styleUrls: ['./slider.component.css'],
encapsulation: ViewEncapsulation.None
})
export class SliderComponent implements OnInit {
@Input()
set open(state:string) {
doOpen();
}
@Input()
set close(state:string) {
doClose();
}
doOpen() {
console.log('open');
}
doClose() {
console.log('close');
}
}
您的客户端 JavaScript 代码应如下所示。
<script>
const button = document.querySelector('#button');
button.addEventListener('click', () => {
console.log('button Click');
const slider = document.querySelector('#slider');
console.log(slider);
// Call open method
slider.open = 'open';
// Call close method
slider.close = 'close';
});
</script>
此外，如果要检索方法上的异步数据并将它们放在任何属性上，则可以从构造函数中获取ChangeDetectorRef并调用ChangeDetectorRef.detectChanges方法。如果不这样做，组件 html 将不知道对属性的任何更改。
使用 setter 并赋值来调用函数可能不那么漂亮。
所以我做了一点改变：
@Input()
get close() {
return () => doClose();
}
现在我们可以调用 close 函数而不是赋值。
在 Angular 8 中，我刚刚做了
@Input()
doFoo() {
console.log('we did it');
}
它奏效了
-
英文原文：http://emberjs.com/guides/components/customizing-a-components-element/ 默认情况下，每个组件是一个<div>元素。如果使用开发工具查看渲染后的组件，将看到一个如下所示的DOM表示： 1 2 3 <div id="ember180" class="ember-view"> <h1>My Component</h1>
-
我在layout/XML中创建了一个自定义组件，它有两个文本视图和两个按钮。在它的支持类中，我只是让按钮递增和递减其中一个TextView的值 接下来，我创建了另一个包含5或6个复合组件的XML布局 在此布局的支持类（扩展活动）中，我设置了复合组件变量setContentView（），并尝试以下操作： 我收到一个错误声明-无法启动活动组件信息）。我只有在调用setLabel（）时才会出现此错误。
-
如何定义条件数组元素？我想做这样的事情： 这按预期工作，并导致，但如果我将设置为
-
如何在useEffect中使用自定义方法？？如果我创建了许多组件，它们使用相同的fetch函数，我应该在每个组件的效果中声明fetch函数吗？？这个函数做同样的工作？？ 据我所知，如果我想在use效应中使用组件的状态，我应该声明并调用use效应中的函数，就像例子1一样。 但是我想声明其他js文件的函数。因为它被称为其他组件。 根据Dan Abramov（https://overreacted.io
-
我正在使用javaFX，我需要把自定义组件放到我的场景中。因此，我有“main_pane.fxml”，网格窗格包含我的组件（例如文档模块）。 它们都在单独的fxml文件中定义。 问题是DocumentModul在构建后没有初始化。它的构造函数被调用，但它的初始化（URL位置、资源包资源）方法没有被调用。因此fxml中的对象没有被注入。 } 对于MainPane，一切正常，但对于任何内部组件都不正常
-
问题内容： 因此，JSON.stringify提供了一种转换JS对象的好方法： 输入JSON字符串，例如： 它使用一个可选的第二个参数来执行此操作，该参数控制应序列化哪些字段： 很好，但是有一个问题。假设您的“ baz”实际上是另一个对象的属性，并且您想要序列化另一个对象： 好吧，通常您只需要在baz上定义一个toJSON方法，例如： 现在，正如我前面提到的，我们已经有了完美的逻辑来“ toJSO
-
我在camel Kafka starter依赖项中使用了一个Kafka组件。在这个问题中，建议我使用“定制器”。我将如何在spring boot应用程序中使用它？