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

Posted 2023-03-13

【中文标题】Angular2 Dart - 在 Angular2 组件中获取文本

【英文标题】：Angular2 Dart - Get Text inside Angular2 Component

【发布时间】：2016-10-04 11:50:35

【问题描述】：

我有一个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 子组件。

是否可以从<item>the-text</item> 中取出the-text，如果可以，应该怎么做？

【参考方案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

【讨论】：

我想这就是为什么每个人都在使用属性的原因，替代方案看起来很可怕：-|

是的，它不是最优的，我相信他们最终会改进它。