为角度访问之外的角度组件创建公共方法答案

【问题标题】：Create public method on angular component for outside of angular access为角度访问之外的角度组件创建公共方法
【发布时间】：2020-02-22 13:07:23
【问题描述】：

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

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

不行，告诉我setSomething不存在。

我试图创建一个像这样的角度组件

@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 做什么，这些组件都没有那个方法

【问题讨论】：

为什么要用vanilla JS？这不是安全。为什么不采用这种 Angular 方式？
我在我的帖子中添加了一个更新，希望能很好地解释我为什么要这样做
如果我理解正确，lib-foo 也是角度组件。你为什么不在那里使用 ViewChild 并在 AfterViewInit 生命周期钩子中调用它的方法？
两者都是独立的项目。 web-component 可以接收任何组件，不一定是角度组件。如果你构建一个 Vue 应用程序并使用我的 web 组件，你需要创建一个具有 setSomething 方法的 vue 组件

标签： angular web-component

【解决方案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 来访问它们。如果你想使用外部角度的方法，那么上面的 sn-p 就是你要找的。p>

【讨论】：

非常有创意，它就像一个魅力 (demo)