Angular 2：当您不知道 childComponent 的 class 时，如何将 childComponent 属性发送到 parent？

Question

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

我有这个组件：

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

我想将标题从它发送到 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 重复用于我想包装在面板中的每个组件：

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

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

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

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

这似乎不适用于 ng-content，因为它与常规 parent/child 组件一样？我不熟悉 angular 2，所以非常感谢您的反馈！

tl;dr ：我想要一种方法让 parent 知道 child 的属性，但是 child 不能是特定的（这就是为什么我使用 <ng-content>).

简而言之，我不想通过 input 这样做：

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

Answer 1

我认为这应该在面板模板中完成

<h2>{{title}}</h2>
<panel class="col-xs-6 col-md-4">
    <like (sendTitle)="receiveTitle($event. title)"></like>
</panel>

并在组件中设置：

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

您像发送（单击）事件一样发送输出事件。 () 表示您将 html 中的内容提交给组件，[] 表示您将组件中的内容绑定至 html.

希望这就是你的意思！

不太清楚为什么要使用 ng-content？每次单击时，parent 标题都会从 child 组件更新。

Answer 2

试试这个：

export class PanelComponent {
  title = 'default title';
  @ContentChild(LikeComponent) like: LikeComponent;

  ngAfterContentInit() {
    this.title = this.like.title;
  }
}

Answer 3

如果要使用事件方式，可以使用element.dispatchEvent创建冒泡事件。 EventEmitter 事件不会冒泡，只能与 (xxx) 绑定一起使用。

在子组件中看起来像

  constructor(private elRef:ElementRef, private renderer:Renderer) {}

  onBlur($event) {
    this.renderer.invokeElementMethod(this.elRef.nativeElement, 
        'dispatchEvent', 
        [new CustomEvent('input-blur', { bubbles: true })]);

另见我的类似回答

Answer 4

经过大量搜索，我找到了一个类似于 Sasxa 的解决方案，但它能够与任何子组件一起使用。关键是 "selector" for @ComponentChild 可以是字符串。

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>

Angular 2：当您不知道 childComponent 的 class 时，如何将 childComponent 属性发送到 parent？

Angular 2 : How do I send childComponent properties to parent when you don't know the childComponent's class?

components

parent-child

typescript

angular