Как разделить переменную общего доступа между двумя компонентами без обслуживания

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 (Nebular)

 <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».Затем вы можете использовать любую переменную public вашего компонента (я полагаю, что вы храните полученные данные в переменной с именем "pictures").

 <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.Извиняюсь за неудобства