Angular: возможно ли запрашивать элементы всей DOM из определенного компонента?

Question

С фрагментами DOM ниже:

<ng-app>
  <ng-comp1></ng-comp1>
  <ng-comp2>
     <ng-comp3></ng-comp3>
  </ng-comp2>
  <ng-comp1></ng-comp1>
</ng-app>

Я бы хотел из ng-comp3 перечислить все компоненты ng-comp1в документе DOM. Есть способ для этого?

ViewChildren перечислить только компоненты внутри ng-comp3.

document.querySelector list элемент DOM, а не компонент.

Answer 1

Короткий ответ: "Нет, вы не можете напрямую перечислить их".

С другой стороны, вы можете ng-app введен в ваш ng-comp3 компонент и взаимодействовать с ng-comp1 через ng-app.

Я привел здесь пример

@Component({
  selector: 'inner-hello',
  template: `<h1>Hello {{name}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class InnerHelloComponent implements AfterViewInit  {
  @Input() name: string;

  constructor(@Inject(forwardRef(() => AppComponent)) private app: AppComponent) {
    console.log(app.name);
  }

  ngAfterViewInit() {
    // Here you will be able to access your ViewChild
  }
}

Не забывайте, что ViewChild и ViewChildren не заселяться, пока ngAfterViewInit уволен

Идея, как можно было заметить, состоит в том, чтобы запросить ng-comp1 в ng-app компонент, сохраните его в общедоступной переменной и получите доступ к нему из ng-comp3. Таким же образом я получаю доступ к собственности name в моем примере