当父组件使用 ng-content Angular 时从子组件访问父组件

Posted 2023-02-23

【中文标题】当父组件使用 ng-content Angular 时从子组件访问父组件

【英文标题】：Access parent component from child component when parent component using ng-content Angular

【发布时间】：2017-07-08 18:10:53

【问题描述】：

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

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

下面是我的代码：

wizard.component.ts（父级）

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（子）

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>

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

【问题讨论】：

你在所有地方都用<ng-content> 弄乱了组件。你能分享你想要实现的图像布局吗？

应该是一个普通的向导，有很多步骤，然后我们可以下一步，后退一步。在每一步中，我们都有不同的 html 设计，这就是我使用 ng-content 的原因。抱歉，我没有布局图像，我正在处理它。谢谢

如果您能详细说明您的问题，我可以帮助您吗

我担心我可以从子组件中注入父组件，例如 Angular 中的注入服务，但我在 Angular 文档上没有看到这种方法。所以不知道是好是坏？

对不起，我不是。我用的是手机。顺便说一句，非常感谢您的 cmets ;)

【参考方案1】：

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

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

【参考方案2】：

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

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

这将为您提供指向父对象中所有子对象的指针。这些可以是投影条目 (ngContent) 或直接 html 声明。然后查询列表将为您获取指向每个孩子的指针。

然后在你的父对象中

public ngAfterViewInit(): void

    this.Options.forEach( ( item ) =>
    
        item.Parent = this;
     ) 

非常简化，但我认为这提供了基本概念。

【参考方案3】：

终于在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

希望它能帮助像我一样有同样担忧的人。

【参考方案4】：

父组件->向导组件

@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

【讨论】：

非常感谢您的努力！这是实现我的目标的替代方法，但在每个步骤中我都有不同的 html 布局，所以我不能像这样使用重复 ngFor。还是谢谢。