Question

假设我有一个角度为祖父母的类，它有一个看起来像这样的html：

<parent>
    <child></child>
</parent>

父项具有子项需要呈现的变量，父项将其传递给子项，子项将其绑定到自己的预定义html中。我怎么能做到这一点？ ViewChild和ContentChild似乎都没有完全正常工作。

Answer 1

让我们说父母和子组件看起来像这样：

@Component({
  selector: 'parent',
  template: `
    <div>
      My name is {{name}} <br>
      children: 
        <ng-content></ng-content>
    </div>
  `,
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {
  name = 'Donald Duck';
}

@Component({
  selector: 'child',
  template: `
    <div>
      My parent is called {{parentName}}
    </div>
  `,
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  @Input() parentName: string;
}

然后您可以使用模板变量引用父级：

<parent #parent>
  <child [parentName]="parent.name"></child>
</parent>

演示：https://stackblitz.com/edit/angular-moa7n8

编辑：回答评论中的问题：

这是非常接近的，但有没有办法让我可以在父母或子女中完成这项任务，并保持祖父母尽可能简单？

是的，您可以使用ContentChild和AfterContentInit生命周期钩子实现此目的。

export class ParentComponent implements AfterContentInit {
  @ContentChild(ChildComponent) child: ChildComponent;

  name = 'Donald Duck';

  ngAfterContentInit() {
    this.child.parentName = this.name;
  }
}

然后祖父母模板就像：

一样简单

<parent>
  <child></child>
</parent>

演示：https://stackblitz.com/edit/angular-nrtghy

Answer 2

首先，使用@ViewChild来反馈子组件，然后使用AfterViewInit;传递变量 - 您需要等待视图初始化才能访问@ViewChild

在祖父母中定义的子模块和父模块之间的角度传递变量

2 个答案: