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子组件。

有没有可能得到the-text来自 <item>the-text</item>如果可以，应该怎么做？

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