Angular2 Dart - 在 Angular2 组件中获取文本 [英] Angular2 Dart - Get Text inside Angular2 Component

问题描述

我有一个在其他组件中使用的 item 组件，item 组件通常如下所示:

I've got an item component which I use inside other components, the item component typically looks like this:

<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，让它有更自然的感觉:

Now I want to change the item so that it has a more natural feel to it:

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

现在我想从这个组件中获取文本the-text.

Now I want to get the text the-text from this component.

我更改了 item 组件以实现 AfterContentInit 以查看是否可以以某种方式捕获文本，然后使用 @ContentChild(String)获取item组件的String内容，但是好像不行...

I change the item component to implement AfterContentInit to see if I can somehow capture the text and then use @ContentChild(String) to get the String content of the item component, but it doesn't seem to work ...

@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

This gives me a giant stacktrace; @ContentChild doesn't seem like the right solution here since it's probably expecting another @Component instead of a String

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

All the Angular examples I can find in the docs are using attributes to pass on values and mostly leaves the content part empty and those that does make use of child components, make use of a proper @Component child component.

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

Is it possible to get the-text out of <item>the-text</item> and if so, how should it be done?

推荐答案

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

With @ContentChild() or @ContentChildren() you can only query for components and directives by passing the type of these components or directives as parameter or you can query for template variables.

如果你有

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

然后你可以用

@ContentChild('someVar') ElementRef someVar;

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

If you don't want the user of your component to require to wrap the content with an element and add a specific template variable you can use a wrapper element around <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/角度/问题/8563

Not sure yet if this issue will make this easier https://github.com/angular/angular/issues/8563

这篇关于Angular2 Dart - 在 Angular2 组件中获取文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！