Angulardart-用动态汇总静态定义的儿童组件一次

Question

我想用动力学来汇总静态定义的儿童组件，一旦可以从流来源。我想要一种通用方法来定义这款旋转木制的旋转木马，在那里我可以在其中包含一个键入的组件集合。该集合可以在静态或动态上定义。以下是一个示例：

import 'package:angular/angular.dart';
import 'package:angular/core.dart';
import 'package:angular_components/angular_components.dart';

/**
 *
 */
@Component(
    selector: 'md-text',
    styleUrls: const ['md_text.css'],
    template: '<li>{{name}}</li>',
    directives: const [
      materialDirectives,
    ]
)
class TextComponent implements OnInit{
  @Input()
  String name;
  TextComponent([this.name]);
  TextComponent.withName(String name)
      : this(name);
  @override
  ngOnInit() {
  }
}
@Component(
    selector: 'md-texts',
    styleUrls: const ['text_component.css'],
    template: '<ol><md-text *ngFor="let component of components" [name]="component.name"></md-text><ng-content></ng-content></ol>',
    directives: const [
      CORE_DIRECTIVES,
      materialDirectives,
      TextComponent
    ]
)
class TextsComponent<TextComponent> implements OnInit
{
  Set<T> _components;
  Set<T> get components => _components;
  addComponent(T component){
    this._components.add(component);
  }
  removeComponent(T component) {
    this._components.remove(component);
  }
  TextsComponent() {
    this._components = new LinkedHashSet<T>();
    TextComponent declarativeChannel = new TextComponent.withName("United States");
    this.addComponent(declarativeChannel);
  }
  @override
  ngOnInit(){
    print("I am here");
  }
}

在我的仪表板组件中，我在静态定义了使用量如下：

<md-texts>
    <md-text [name]="'Liberty'"></md-text>
    <md-text [name]="'Life'"></md-text> 
<md-texts>

显示如下美国自由生活

我想做的是将"自由"one_answers"生命"汇总到我的组件集合中，因此我可以通过下一个和上一个按钮来控制它。我也只想在需要它们的索引时渲染它们。在Angulardart中做到这一点的最佳方法是什么？

我找到了一个具有旧版本的类似问题，但是较旧的版本如何从Angulardart中的Angulardart中的父母参考AD 1.0.0的父母，以及如何从Angulardart中的父母参考AD 1.0.0

中的父母。

问候，希望我已经解释了我的问题，我将在解决此设计问题的正确方法上明确指示。

Answer 1

您可以使用@ViewChildren和@ContentChildren查询子组件。@ViewChildren将查询模板中声明的组件，而@ContentChildren将查询投影到模板中的<ng-content>中的组件。

值得一提的是，在您的示例中，您的动态TextComponent是两次创建的。首先，您在构造函数中创建一个，然后在模板中声明<md-text>时再次创建一个。这意味着您要参考的实例实际上并不是您视图中呈现的组件。为了避免这种情况，不要急切地创建实例。只需保留创建数据所需的数据的模型，然后通过模板中的输入将其传递给您声明组件。然后，您可以使用@ViewChildren查询您创建的那些组件。

这是一个示例

@Component(
  selector: 'md-texts',
  template: '''
    <ol>
      <md-text *ngFor="let text of texts" [text]="text"></md-text>
      <ng-content></ng-content>
    </ol>
  ''',
  directives: const [NgFor, TextComponent],
)
class TextsComponent {
  /// Text that was projected through `<ng-content>`.
  @ContentChildren(TextComponent)
  QueryList<TextComponent> contentTexts;
  /// Text that was created in our view from our model.
  @ViewChildren(TextComponent)
  QueryList<TextComponent> viewTexts;
  /// Data model for the text in our view.
  final List<String> texts = [
    ...
  ];
}

另外，您可以从视图中的单个数据源呈现所有<md-text>，并依靠传递静态数据的模型而不是投影组件。