angular - 在 Angular 中，如何将变量从父组件公开给子组件？

Question

假设我有一个组件，该组件的用户可以在其中嵌入自己的内容并访问父级公开的变量。

假设我有以下父组件模板

    @Component({
      selector: 'parent',
      template: `<ng-container>
                  <ng-content [select]="content"></ng-content>
                </ng-container>`
    )}

下面是如何使用该组件的示例。

    <parent>
      <div content>
        <button (click)="x.close()"></button>
      </div>
    </parent>

我需要向x组件的用户公开变量。我如何在 Angular 中做到这一点？

我想这样做的原因是因为父级必须不知道它将包含的子组件的任何信息，这就是为什么我只想公开一个变量的原因。这样，只有孩子需要了解父母，反之则不需要。

Answer 1

如果您尝试从父组件访问变量，您可以#在 html 中使用 Template variable reference()。请参考下文。

    @Component({
      selector: 'parent',
      template: `<ng-container>
                  <ng-content [select]="content"></ng-content>
                </ng-container>`
    )}
    export class ParentConteinr {
      x = {
         close: () => { // code to close }
      }
    }

    <parent #parent>
      <div content>
        <button (click)="parent.x.close()"></button>
      </div>
    </parent>