Question

我正在尝试使用Angular 7做一个步进器，我不怎么用英语解释，所以代码更好地解释;）

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

@Component({
  selector: 'app-ga-main',
  template: `<app-ga-font>A</app-ga-font><app-ga-font>B</app-ga-font>`,
  styleUrls: ['./ga-main.component.scss']
})
export class GaMainComponent implements OnInit {


  constructor() { }

  ngOnInit() {
  }

}

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

@Component({
  selector: 'app-ga-font',
  template: `<div class="ga-font-container">
              <div class="ga-font-border">
                <div class="ga-font-box">
                  <ng-content></ng-content>
                </div>
              </div>
            </div>`,
  styleUrls: ['./ga-font.component.scss']
})
export class GaFontComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

如何获取GaMain组件中的每个元素？

我需要这样的东西：

gaFontObjects = [
  {<div...A...</div>},
  {<div...B...</div>}
]

所以我可以像这样与他们一起玩

this.gaFontObjects[1].style.display.none;

做一个步进器（我的用例与此示例有疯狂的区别，但在全球范围内是同一回事）

Answer 1

为什么要直接使用DOM，特别是设置不显示，而Angular根本不建议使用？

如果要获取所有子代，则可以执行以下操作并调用方法或设置将处理UI本身的子代组件的属性。您可以执行以下操作。

@ViewChildren(GaFontComponent) children : QueryList<GaFontComponent>;

Answer 2

我将分两部分回答...

1。提供直接答案并提供您建议的方式

一种访问由组件呈现的子DOM元素的方法是：

将ElementRef注入组件的构造函数中
使用它来获取对组件宿主元素的引用
在引用上调用nativeElement以访问DOM节点
在DOM节点上调用querySelectorAll以查找所有子节点。从这里您将可以访问HTMLElement，因此您可以可以操作样式等。

下面是一个示例：https://stackblitz.com/edit/angular-ebxpq7?file=src%2Fapp%2Fga-main.component.ts

如果您需要访问子组件而不是DOM节点，则还可以使用@ViewChildren。

2。解释为什么您（几乎可以肯定）不应这样做

尽管上述可能，但与通用Angular方法大相径庭。在大多数情况下，除非有特殊原因，否则您应避免直接操作DOM元素。

通常，您应该旨在构建一棵组件树并使用@Input和@Output在它们之间进行通信。您可以使用*ngIf（根据某些条件选择性地显示和隐藏元素），*ngFor（遍历元素并动态渲染元素）或绑定来控制在每个组件模板中渲染的内容作为[style]来动态控制CSS属性。

这允许Angular处理生命周期/渲染/更改检测等，并且通常使应用程序的代码更高效，更安全，更易于维护。

Angular的文档建议不要使用直接DOM操作，例如，请参见此处的注意事项。 https://angular.io/api/core/ElementRef#properties

根据您的情况（如果功能有些晦涩），这是一个更简洁的示例：https://stackblitz.com/edit/angular-n42xyv?file=src/app/ga-main.component.ts

在此示例中，app-ga-main组件循环了一组字体名称，为每个字体呈现一个app-ga-font组件，并通过其fontColor输入为每个颜色传递颜色。 app-ga-font组件使用Angular绑定根据提供给color输入的值来设置fontColor CSS属性。例如，您可以选择在display上使用绑定来显示/隐藏元素，或者通过使用*ngIf来确定是否应显示每个项目来完全忽略它们。

计数并获得孩子在父组件中的

2 个答案: