在 angular 组件上创建 public 方法以供 angular 外部访问

Question

如果我在例如 DevTools 控制台中查询 angular 元素

$> $('app-foo').setSomething('yolo');

不行，告诉我setSomething不存在

我试过创建这样的 angular 组件

@Component({
     selector: 'app-my-component',
     template: 'my component'
})
export class MyComponent {
    @Input()
    setSomething(input: string): void {
        // do magic
    }
}

DEMO

但是，如果我将我的组件编译为 Web 组件（使用 @angular/elements），它实际上可以工作。但在我目前的情况下，我不会创建 Web 组件，而且我必须处理 angular 个组件。所以问题是，我怎样才能使方法在 DOM 实例上可用？如果有其他方法也请告诉我！

更新：我想这样做的原因是我用@angular/elements 创建了一个名为 lib-foo 的 Web 组件。该组件应接收另一个组件，如下所示

<lib-foo>
     <an-angular-component></an-angular-component>
</lib-foo>

来自 lib-foo 的模板只是 <slot></slot>（启用了 shadowdom）。

我想从 lib-foo 访问 an-angular-component，所以我访问了

child = this.element.nativeElement.children[0]; // an-angular-component
contentChild.setSomething('yolo');

lib-foo 应该只获取具有 setSomething 方法的子项。但是无论我在我的另一个 angular 项目中创建 an-angular-component，这些组件从来没有那个方法

Answer 1

您可能会收到很多回复，告诉您您尝试做的事情是个坏主意。这当然不是最佳实践，必须执行类似的操作表明您应该重新考虑应用程序的设计和架构。

但如果你真的必须这样做，这是一种方法：

@Component({
  selector: 'app-foo',
  templateUrl: './foo.component.html',
  styleUrls: ['./foo.component.css']
})
export class FooComponent {

  constructor(elementRef: ElementRef) {
    // get the native element and set a function on it
    (elementRef.nativeElement as any).setSomething = this.setSomething
  }

  @Input()
  setSomething(input: string) {
     console.log('set something');
  }
}

然后您可以查询文档中的元素并调用其上的函数，即 $('app-foo').setSomething();

如果您试图从父组件访问子组件的方法，您可以使用 https://angular.io/api/core/ViewChildren 来访问它们。如果你想使用外部的方法 angular，那么上面的代码片段就是你要找的。

在 angular 组件上创建 public 方法以供 angular 外部访问

Create public method on angular component for outside of angular access

web-component

angular