Question

我有一个item组件，我在其他组件中使用，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组件的String内容，但它似乎不起作用......

@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

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

1 个答案: