当 parent 组件使用 ng-content Angular 时从 child 组件访问 parent 组件

Question

我正在尝试使用依赖注入从 child 组件访问 parent 组件。它有效，我可以访问 parent 以使用它的方法和属性，但我没有在 Angular 文档上看到这种方法。那么你对这种方法有什么想法吗？我应该使用它吗？

因为 parent 组件使用 ng-content（比如 transclude angularjs）所以我不能使用 EventEmitter @Output 方法。

下面是我的代码：

wizard.component.ts (parent)

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

@Component({
    selector: 'wizard',
    template: `
        <div>
            <ng-content></ng-content>
            <button>Back</button>
            <button>Next</button>
        </div>
    `
})
export class WizardComponent implements OnInit {
    steps = [];

    constructor() { }

    addStep(step) {
        this.steps.push(step);
    }

    ngOnInit() { }
}

step.component.ts (child)

import { WizardComponent } from './wizard.component';
import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'step',
    template: `
        <div>Step <ng-content></ng-content></div>
    `
})
export class StepComponent implements OnInit {
    constructor(private parent: WizardComponent) { 
        this.parent.addStep(this);
    }

    ngOnInit() { }
}

app.component.html（主应用）

<wizard>
    <step>1</step>
    <step>2</step>
    <step>3</step>
</wizard>

期待听到您的意见。谢谢！

Answer 1

父组件-> 向导组件

@Component({
  selector: 'wizard',
  template: `
    <div>
      <steps [steps]="steps"> </steps>
      <button> Back </button>
      <button> Next </button>
      <button (click)="addStep()"> Add a step </button>
    </div>
  `,
})
export class WizardComponent {
  steps:any[]=new Array();
  constructor() {
    this.steps.push({id:1,name:'abc'});
    this.steps.push({id:2,name:'abc'});
    this.steps.push({id:3,name:'abc'});
  }
  addStep(){
    let count = parseInt(this.steps.count) + 1;
    this.steps.push({id:count,name:'abc'});

  }
}

StepComponent -> 子组件

@Component({
  selector: 'steps',
  template: `
    <div>
      <span *ngFor="let step of steps">
            <label> {{step.id}} </label>
             <div> {{step.name}} </div>
      </span>
    </div>
  `,
})
export class StepsComponent {
  @Input() steps:any[]=new Array();
  constructor() {

  }

}

更新1：每个步骤都会出现不同的元素，所以我建议你使用下面的<ng-content>

<div>
     <ng-content select=".step-body"> </ng-content>

</div>

您的向导看起来像

  <table>
    <tr>
        <td>
            <steps>
                <div class="step-body">
                hi hello

                </div>
              </steps>
        </td>
        <td>
            <steps>
                <div class="step-body">
                something else

                </div>
            </steps>
        </td>
    </tr>
    </table>

LIVE DEMO

Answer 2

终于在这里https://angular.io/docs/ts/latest/cookbook/dependency-injection.html#!#known-parent.

找到了关于父依赖注入的文档

并且有一篇文章使用它：https://blog.thoughtram.io/angular/2015/04/09/developing-a-tabs-component-in-angular-2.html

希望对和我有同样烦恼的人有所帮助

Answer 3

您可以通过在使用查询列表的 parent object 上创建属性来提供 parent 和 child 通信。您还必须在 child 组件上添加属性或方法以接收 parent 指针。

@ContentChildren( OptionComponent )
public Options: QueryList<OptionComponent>;

这将为您提供指向 parent object 中所有 children 的指针。这些可以是投影条目 (ngContent) 或直接 html 声明。然后，查询列表将为您抓取指向每个 child 的指针。

然后在你在你parentobject

public ngAfterViewInit(): void
{
    this.Options.forEach( ( item ) =>
    {
        item.Parent = this;
    } ) 
}

大大简化了，但我认为这提供了基本思想。

Answer 4

父 DI/已知父的文档移至此处：

https://angular.io/guide/dependency-injection-navtree#find-a-parent-component-of-known-type

Answer 5

另一种方法是使用 class 接口 并使用此 class 接口[=找到 parent 41=]

class接口：它是一个抽象class用作接口而不是基础class。

根据定义，parent 应该实现 class 接口。

一个场景：如果我们有一个叫做'AppleComponent'的childclass，我们需要访问它在parentclass'FruitsComponent'里面this child class 得到 this parent.
的 props/methods
1- 制作class界面

export abstract class Parent { abstract amount: number; }

这里我们定义了 class 将由 parent 实现，它有一个抽象的属性作为示例，将在 FruitsComponent 中定义。

2-更新水果class

@Component({ ... providers: [{ provide: Parent, useExisting: forwardRef(() => FruitsComponent) }], }) export class FruitsComponent implements Parent{ public amount = 5; .... }

3- 访问 child class
中的 parent class
export class AppleComponent { constructor( @Optional() public parent?: Parent) { console.log('The amount in the parent is: 'this.parent?.amount) } ... }

来自控制台的结果

The amount in the parent is: 5

就是这样。

参考：通过其class界面找到一个parent

当 parent 组件使用 ng-content Angular 时从 child 组件访问 parent 组件

Access parent component from child component when parent component using ng-content Angular

angular

angular-components

angular2-ngcontent