Question

有没有办法从子组件中获取子项？

想象一下以下组件树：

应用
- 问题
  - 问题选项（包含复选框）
  - 问题选项（包含复选框）
  - 问题选项（包含复选框）

我想从Question Option访问App以检查所有复选框。

有关示例，请参阅https://stackblitz.com/edit/angular-ghvsuu。

Answer 1

你可以用不同的方式做到这一点。

在@ViewChildren(QuestionOptionComponent) options而不是QuestionComponent

中添加AppComponent

并在AppComponent

export class AppComponent  {

  @ViewChild(QuestionComponent) question

  constructor(private elementRef: ElementRef) {}

  checkAll() {
    console.log("this.question", this.question) // found
    console.log("this.options", this.question.options) // found

  }
}

分叉DEMO

Answer 2

此代码选择所有项目 Demo

export class AppComponent {

    @ViewChild(QuestionComponent)
    private question: QuestionComponent;

    constructor(private elementRef: ElementRef) { }

    checkAll() {
        (<Array<QuestionOptionComponent>>this.question.options)
        .forEach( (item: QuestionOptionComponent) => {
            item.checked = true;
        });   
    }
}

Answer 3

您可以通过 constructor(private el: ElementRef){} 获取应用（或任何组件）的本机元素来采取替代和笨拙的选择。然后在 ngAfterViewInit 中执行 setTimeout(() => { const myElements = this.el.nativeElement.querySelectorAll('[class="my-checkbox"]')});

只需将 class="my-checkbox" 替换为复选框上的任何识别特征（通过 chrome 开发工具检查元素找到它）。

并且使用 el.nativeElement 而不是 document 因为你不希望它是全局的，你只想要那些作为子组件的组件。

这是一种非常肮脏的方法，但它会为您提供所需的 html 元素，无论它们有多深。它不会为您提供角度组件，但您应该能够直接从 html 更新选中状态。

如果您有权访问问题组件，则应改为使用 @viewchildren 来代替，我只会在使用无法直接编辑组件的 Angular Material 等 3rd 方库时使用此方法作为最后的手段。

在角度6中是否有任何方法可以让ViewChildren深入？

3 个答案: