Question

我正在使用Angular 2.0.1。

我有一个可以通过<ng-content>接收任何其他组件的组件 - 这很有效。

我遇到的问题是我想引用注入的组件。

如果我知道@ContentChild(MyComponent) dynamicTarget: IMyComponent;只会是一个组成部分我可以说： <ng-content #dynamicTarget'>但是因为它可能是任何组件（我将做的唯一假设是任何注入的组件实现特定的接口）它变得更加棘手。

我还尝试了@ContentChild('dynamicTarget') dynamicTarget: IMyComponent;，然后通过说validate来引用它，但这会返回undefined。

有谁知道我怎么能告诉Angular 2这个东西是一个组件的实例，以便我可以尝试调用它上面的函数？

为了进一步说明用例 - 我有一个多步骤向导，可以将任何组件作为内容，我想在内容上调用$(document).ready(function (){ $('.buttons button').click(function (){ $('#info').empty(); var index = $('.buttons button').index($(this)); $('#info').html($('.info:eq('+index+')').html()); }); });函数（我再次假设存在在所说的实例上）

Answer 1

一种方法可能是为任何动态组件提供相同的#id。我给了#thoseThings。（我认为它与@Missingmanual几乎相同）

PLUNKER（请参阅控制台查看匹配项。）

@Component({
  selector: 'my-app',
  template: `
  <div [style.border]="'4px solid red'">
    I'm (g)Root.

    <child-cmp>
      <another-cmp #thoseThings></another-cmp>
    </child-cmp>
  </div>
  `,
})
export class App {
}


@Component({
  selector: 'child-cmp',
  template: `
    <div [style.border]="'4px solid black'">
        I'm Child.
      <ng-content></ng-content>
    </div>
  `,
})
export class ChildCmp {
  @ContentChildren('thoseThings') thoseThings;

  ngAfterContentInit() {
    console.log(this.thoseThings);

    this.validateAll();

    if(this.thoseThings){
     this.thoseThings.changes.subscribe(() => {
       console.log('new', this.thoseThings);
     }) 
    }
  }

  validateAll() {
    this.thoseThings.forEach((dynCmp: any) => {
      if(dynCmp.validate)
       dynCmp.validate();  // if your component has a validate function it will be called
    });
  }
}


@Component({
  selector: 'another-cmp',
  template: `
    <div [style.border]="'4px solid green'">
        I'm a Stranger, catch me if you can.
    </div>
  `,
})
export class AnOtherCmp {
}

Answer 2

超类查询曾用于旧版本https://github.com/angular/angular/issues/8580，但我无法使其与NgModule一起使用

CREATE FUNCTION dbo.activeEmpGivenCity(@city nvarchar(50))
RETURNS TABLE
AS
RETURN
(
    SELECT e.Emp_First_Name
    FROM Employee_Details AS e
    INNER JOIN City AS c ON e.Emp_City_Id = c.City_Id 
    WHERE @city = c.City_Name AND e.Emp_Active = 1
);

Plunker example

您可以使用动态组件创建 Angular 2 dynamic tabs with user-click chosen components与向导步骤而不是标签。
另一种方法是明确地将元素传递给输入以及投射它们：

Plunker example

Answer 3

如果您知道所有组件都有validate并实现相同的界面，例如IValidate，然后你可以说

@ContentChild('IValidate') dynamicTarget: IValidate;
// ...
this.dynamicTarget.validate();

Angular并不关心确切的类，只要它适合所请求的接口。

Angular 2引用@ContentChild的动态实例

3 个答案: