Создать метод publi c для компонента angular для доступа вне angular - PullRequest
Новая
       1

Создать метод publi c для компонента angular для доступа вне angular

1 голос
/ 22 февраля 2020

Если я запрашиваю элемент angular, например, в консоли DevTools 

$> $('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

Однако, если я скомпилирую свой компонент в веб-компонент (используя @angular/elements) это на самом деле работает. Но в моем текущем случае я не собираюсь создавать веб-компонент, и мне приходится иметь дело с angular компонентами. Вопрос в том, как сделать метод доступным для экземпляра DOM? Если есть другой способ сделать это, пожалуйста, дайте мне знать!

ОБНОВЛЕНИЕ: Причина, по которой я хотел бы это сделать, заключается в том, что я создал веб-компонент с @ angular / elements с именем lib-foo. Этот компонент должен получить другой компонент следующим образом: 

<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. Но что бы я ни делал для создания an-angular-component в моем другом angular проекте, эти компоненты никогда не имеют такой метод

1 Ответ

2 голосов
/ 22 февраля 2020

Вы, вероятно, получите много ответов о том, что то, что вы пытаетесь сделать, является плохой идеей. Это, конечно, не лучшая практика, и необходимость делать что-то подобное является признаком того, что вам следует пересмотреть дизайн и архитектуру вашего приложения.

Но если вам действительно нужно, это один из способов сделать это: 

@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, то приведенный выше фрагмент будет тем, что вы ищете.

...