角度2：当您不知道childComponent的类时，如何将childComponent属性发送给父级？ [英] Angular 2 : How do I send childComponent properties to parent when you don't know the childComponent's class?

问题描述

好的，这就是我要实现的目标：

Okay so here's what I'm trying to achieve :

我有此组件：

import { Component, Output, EventEmitter, OnInit } from '@angular/core';

@Component({
  selector: 'like',
  template: '<p>this is the like component<p>'      
})

export class LikeComponent implements OnInit{
  title: string = 'Like Component';

  @Output() sendTitle = new EventEmitter();

  ngOnInit() {
    this.sendTitle.emit({title: this.title});
  }    
}

我想将标题从标题发送给父母：

I want to send the title from it to the parent :

import { Component, Input } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'panel',
  template: `
      <div class="panel panel-default">
        <div class="panel-heading">
          <h2 class="panel-title">{{title}}</h2>
        </div>
        <div class="panel-body">
          <ng-content (sendTitle) = "receiveTitle($event)"></ng-content>
        </div>
      </div>
  `
})
export class PanelComponent {
  title = 'default title';

  receiveTitle(arg) {
    this.title = arg.title;
    console.log(arg);
  }
}

然后我可以重用 PanelComponent 和我要包装在面板中的每个组件：

Then I could reuse the PanelComponent with every component I want to wrap in a panel :

<panel>
    <like></like>
</panel>

<panel>
    <another-component></another-component>
</panel>

<panel>
    <exemple-component></exemple-component>
</panel>

每次显示 Panel 组件，它会尝试从事件中获取标题（如果存在的话）。

Each time a Panel component would be shown, it would try to get the title from the event if it exists.

似乎这与ng-content并不一样，对于常规的父/子而言零件？我不熟悉angular 2，所以非常感谢您的反馈！

It seems that this isn't working with ng-content as it is with regular parent/child component? I'm not familiar with angular 2 so I'd appreciate your feedback!

tl; dr：我想让父母知道孩子的财产，但是该孩子没有具体说明（这就是为什么我使用< ng-content> 的原因）。

tl;dr : I want a way for a parent to know a properties from a child but the child musn't be specific (this is why I use <ng-content>).

在简短地说，我不想通过 input 来做到这一点：

In brief, I don't want to do it through input like this :

<panel [title] = "'This is the panel title of the like component'">
    <like></like>
</panel>

<panel [title] = "'This is the panel title of the another-component'">
    <another-component></another-component>
</panel>

推荐答案

经过大量搜索，我发现了类似的解决方案Sasxa的，但能够与任何子组件一起使用。关键是 @ComponentChild 的选择器可以是字符串。

After a lot of searching, I found a solution like Sasxa's, but able to work with any child component. The key is that the "selector" for @ComponentChild can be a string.

interface TitledComponent {
    title?: string;
}

@Component({
    selector: 'panel',
    template: `<div class="panel">
                    <h2>{{title}}</h2>
                    <ng-content></ng-content>
                </div>`
})
export class PanelComponent {
    title = 'default title';

    @ContentChild('titled') childComponent: TitledComponent;

    ngAfterContentInit() {
        if (this.childComponent)
            this.title = this.childComponent.title || 'default title';
    }
}

HTML必须是

<panel>
    <like #titled></like>
</panel>
<panel>
    <other #titled></other>
</panel>
<panel>
    <p>I don't have a title</p>
</panel>
<panel>
    <like></like>
    <!-- This won't be picked up -->
</panel>

这篇关于角度2：当您不知道childComponent的类时，如何将childComponent属性发送给父级？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！