Раскрывающийся список @viewchild выглядит как неопределенный в ngAfterViewInit

Question

app.component.ts

        import { Component, ViewChild ,AfterViewInit, ElementRef} from '@angular/core';
        import { ChildComponent } from './child/child.component';

        @Component({
          selector: 'app-root',
          templateUrl: './app.component.html',
          styleUrls: ['./app.component.css']
        })
        export class AppComponent implements AfterViewInit {

          @ViewChild("dropdown1", { static: false }) dropdown: ElementRef;
          ngAfterViewInit(): void {
            console.log(this.dropdown)
          }
        }

app.component. html

    <app-child></app-child>

child. component.ts

import { Component, OnInit } from '@angular/core';

    @Component({
      selector: 'app-child',
      templateUrl: './child.component.html',
      styleUrls: ['./child.component.css']
    })
    export class ChildComponent implements OnInit {

      constructor() { }

      ngOnInit(): void {
      }

    }

child.component. html

    <select  #dropdown1>
      <option value="1">
          Text1
      </option>
      <option value="2">
        Text2
    </option>
    </select>

Точка 1 Я пытаюсь получить доступ к раскрывающемуся элементу дочернего элемента в родительском элементе, используя @viewchild, но выпадающий список становится нулевым в родительском компоненте в хуке жизненного цикла ngAfterViewInit

Точка 2 После раскрытия доступа в родительском элементе я хочу установить конкретный параметр раскрывающегося списка в родительском ...

Answer 1

Сначала вы должны увидеть дочерний компонент. Дочерний компонент должен видеть выпадающий список. Поэтому в дочернем компоненте создайте метод, который показывает раскрывающийся список, и вызовите его от отца в методе ngAfterViewInit, который отвечает после Angular, инициализирует представления компонента и дочерние представления.

1)
            import { Component, ViewChild ,AfterViewInit, ElementRef} from '@angular/core';
            import { ChildComponent } from './child/child.component';

            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
              styleUrls: ['./app.component.css']
            })
            export class AppComponent implements AfterViewInit {

              @ViewChild('dropdown1', { static: true }) child: ChildComponent;

              ngAfterViewInit(): void {
                this.child.dropdown();
              }
            }

        2) app.component.html
        <app-child></app-child>

        3)import { Component, OnInit } from '@angular/core';

        @Component({
          selector: 'app-child',
          templateUrl: './child.component.html',
          styleUrls: ['./child.component.css']
        })
        export class ChildComponent implements OnInit {

          constructor() { }

          @ViewChild(ElementRef, { static: true }) dropdown: ElementRef;

          ngOnInit(): void {
          }

          dropdown(){
            console.log(this.dropdown);
          }

        }
       4.child.component.html

        <select  #dropdown1>
          <option value="1">
              Text1
          </option>
          <option value="2">
            Text2
        </option>
        </select>