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

问题描述

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

 < item type =the-typetext =the-text>< / item& 
  

，定义如下：

  @Component（
 selector：'item'，
 template：'...'）
 class Item {
 
 @ Input（）String text =text-goes-here; 
 @Input（）String type =type-goes-here; 
 
} 
  

现在我要更改项，以使其具有更自然的感觉：

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

现在我想得到文本 the-text c> $ c> c> c> AfterContentInit 查看是否可以以某种方式捕获文本，然后使用 @ContentChild（String）获取项的String内容组件，但它似乎不工作...

  @Component（
 selector：'item'，
 // providers：const [String]，
 template：''）
类实现AfterContentInit {
 
 @ContentChild字符串文本; 
 @Input（）String type =type-goes-here; 
 
 @override 
 ngAfterContentInit（）{
 print（ngAfterContentInit：+ text）; 
} 
 
} 
  

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

我可以在文档中找到的所有Angular示例都使用属性传递值，和那些确实利用子组件，使用一个合适的 @Component 子组件。

可以从< item> the-text< / item> 中获取文本 c> c>

code> @ContentChildren（）您只能通过传递这些组件或指令的类型作为参数来查询组件和指令，或者您可以查询模板变量。

如果您有

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

>

  @ContentChild（'someVar'）ElementRef someVar; 
  

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

周围的包装元素

 code> @Component（
 selector：'item'，
 // providers：const [String]，
 template：'< div＃wrapper>< ng-content> < / ng-content>< / div>'）
类Item实现AfterContentInit {
 
 @ViewChild（'wrapper'）ElementRef wrapper; 
 @Input（）String type =type-goes-here; 
 
 @override 
 ngAfterContentInit（）{
 print（wrapper.innerHtml）; //或`wrapper.text` 
} 
} 
  

如果这个问题会使这更容易 https://github.com/angular/angular/issues/8563

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>

and is defined like this:

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

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

}

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

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

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

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);
    }

}

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

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.

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

解决方案

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.

If you have

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

then you can query for the div with

@ContentChild('someVar') ElementRef someVar;

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`
    }
}

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

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