Question

我有2个组成部分：

export class A implements OnInit {
.
.
.
}

export class B implements OnInit {
@Component({
  selector: 'app-center-pictures',
  templateUrl: 'center-pictures.component.html',
  providers: [PictureService],
  styleUrls: ['center-pictures.component.css']
})
   pictures: PictureData[];
   center: Center;
   .
   .
   .

A的模板包含一个nb-tab（星形）

 <nb-tab tabTitle="Photos"
                    badgeText="..."
                    badgePosition="top right"
                    badgeStatus="info">
                    <div class="separator">
                        <app-center-pictures [center]="center"></app-center-pictures>
                      </div>
            </nb-tab>

我希望badgeText等于pictures.length，但我无法直接访问它，因为模板是A的模板，而不是B的模板

Answer 1

使用“变量引用”-在这种情况下，我称为“ centerPictures”。然后，您可以使用组件的任何公共变量（我想您将接收到的数据存储在一个名为“图片”的变量中）。

 <nb-tab tabTitle="Photos"
        badgeText="centerPictures?.pictures?.length"
        badgePosition="top right"
        badgeStatus="info">
        <div class="separator">
            <app-center-pictures #centerPictures [center]="center">
            </app-center-pictures>
        </div>
</nb-tab>

在之前的代码中

更新（和声明符），我谈论的是放置#centerPictures="CenterPicturesComponent"，这是错误的，使用#templateReference="directive"如果指令不是自己的，则很有用零件。简而言之是在输入中编写#templateReference="ngModel"，然后使用ngModel的方法和属性。不便之处，敬请谅解

如何在没有服务的情况下在两个组件之间共享共享变量

1 个答案: