Angular2 Dart - 在 Angular2 组件中获取文本

Question

我有一个 item 组件，我在其他组件中使用它，项目组件通常如下所示：

<item type="the-type" text="the-text"></item>

并且定义如下：

@Component(
    selector: 'item',
    template: '...')
class Item {

    @Input() String text = "text-goes-here";    
    @Input() String type = "type-goes-here";

}

现在我想更改 item 以使其具有更自然的感觉：

<item type="the-type">the-text</item>

现在我想从此组件中获取文本 the-text。

我更改 item 组件以实现 AfterContentInit 以查看是否可以某种方式捕获文本，然后使用 @ContentChild(String) 获取 item 的字符串内容组件，但似乎不起作用...

@Component(
    selector: 'item',
    //providers: const[String],
    template: '')
class Item implements AfterContentInit {

    @ContentChild(String) String text;
    @Input() String type = "type-goes-here";

    @override
    ngAfterContentInit() {
        print("ngAfterContentInit: " + text);
    }

}

这给了我一个巨大的堆栈跟踪； @ContentChild 在这里似乎不是正确的解决方案，因为它可能期待另一个 @Component 而不是 String

我在文档中可以找到的所有 Angular 示例都使用属性传递值，并且大部分将内容部分留空，而那些确实使用子组件的示例，使用适当的 @Component 子组件。

是否有可能从 <item>the-text</item> 中得到 the-text，如果可以，应该如何完成？

Answer 1

使用 @ContentChild() 或 @ContentChildren() 您只能通过将这些组件或指令的类型作为参数传递来查询组件和指令，或者您可以查询模板变量。

如果你有

<item type="the-type">
  <div #someVar>the-text<div>
</item>`

然后您可以使用

查询 div

@ContentChild('someVar') ElementRef someVar;

如果您不希望组件的用户要求用元素包装内容并添加特定的模板变量，您可以在 <ng-content>

周围使用包装器元素

@Component(
    selector: 'item',
    //providers: const[String],
    template: '<div #wrapper><ng-content></ng-content></div>')
class Item implements AfterContentInit {

    @ViewChild('wrapper') ElementRef wrapper;
    @Input() String type = "type-goes-here";

    @override
    ngAfterContentInit() {
        print(wrapper.innerHtml); // or `wrapper.text`
    }
}

还不确定这个问题是否会让这更容易https://github.com/angular/angular/issues/8563

Angular2 Dart - 在 Angular2 组件中获取文本

Angular2 Dart - Get Text inside Angular2 Component

dart

angular-dart

angular