web - 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>

显示如下
美国
自由
生活

我想要做的是将“自由”和“生命”也汇总到我的组件集合中，因此我可以使用“上一个”和“下一个”按钮来控制它。我也只想在需要它们的索引时渲染它们。在AngularDart中执行此操作的最佳方法是什么。

我在旧版本中发现了类似的问题，但旧版本为 How to reference child component from its parent in AngularDart in AD 1.0.0和 How to reference child component from its parent in AngularDart in AD 1.0.0

希望我已经解释了我的问题，并且我将就解决此设计问题的正确方法获得明确的指导。

Answer 1

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

值得一提的是，在您的示例中，动态TextComponent被创建了两次。首先，在构造函数中创建一个，然后在模板中声明<md-text>时再次创建。这意味着您要引用的实例实际上并不是 View 中呈现的组件。为了避免这种情况，请不要强制性地创建实例。只需保留创建数据所需的数据模型，然后将其传递到模板中用于声明组件的输入即可。然后，您可以使用@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 = [
    ...
  ];
}

或者，您可以从 View 中的单个数据源呈现所有 <md-text>，并依靠为静态数据传入模型而不是投影组件。