Как я могу обновить часть значения наблюдаемого без повторного рендеринга всей моей страницы? - PullRequest
Новая
       5

Как я могу обновить часть значения наблюдаемого без повторного рендеринга всей моей страницы?

0 голосов
/ 10 октября 2018

Я пытаюсь максимально использовать асинхронный канал, потому что слышу, что это лучшая практика, так как он управляет наблюдаемыми для вас подписками.

Очень упрощенная версия моего приложения выглядит примерно так: 

export class OrderDetailComponent implements OnInit {
  order$: Observable<Order>;
  lineItems$: Observable<LineItem>;

  constructor(
    private orderService: OrderService,
    private lineItemService: LineItemService
  ) {}

  ngOnInit() {
    this.order$ = this.getOrders();
    this.lineItems$ = this.getLineItems();
  }

  private getOrders(): Observable<Order> {}
  private getLineItems: Observable<LineItem[]>;
}

И тогда шаблон выглядит примерно так: 

<div *ngIf="order$ | async; let order">
  Order#: {{order.ID}}

  Line Items
  <div *ngIf="lineItems$ | async; let lineItems">
    <div *ngFor="let li of lineItems">
        <app-lineitem-card [lineItem]="li"></app-lineitem-card>
    </div>
  </div>

  Order Summary:
  Total: {{order.Total}}
</div>

Очевидно, что это упрощено, но дело в том, что порядок нужен почти везде на странице, поэтому я использую асинхронныйтруба на внешнем div.Это прекрасно работает при загрузке первой страницы, но я сталкиваюсь с ситуацией, когда я обновляю часть порядка, которая на самом деле затрагивает только очень небольшую часть страницы, скажем, order.Total.Я знаю, что могу сделать следующее, чтобы обновить порядок: 

this.order$ = this.getOrder()

, но это вызывает повторную инициализацию всех моих компонентов (из-за ngIf). Как правильно обрабатывать этот сценарий?

Ответы [ 2 ]

0 голосов
/ 11 октября 2018

Читать это:

https://angular -2-training-book.rangle.io / раздаточный материал / обнаружение изменений / change_detection_strategy_onpush.html

Но на этот раз мы явно сказали Angular, что наш компонент зависит только от его входных данных и все они неизменны .Затем Angular предполагает, что MovieComponent не изменился, и пропустит проверку для этого компонента.

Объясняется с как можно меньшим количеством слов: стратегия обнаружения изменений влияет на то, как angular решает, когда следует повторно визуализировать компонент.При использовании По умолчанию он будет проверять все свойства, чтобы проверять изменения (а также будут и другие триггеры).При использовании OnPush обнаружение изменений будет выполнять только проверку на равенство ваших входных параметров, чтобы решить, нужно ли выполнить повторную визуализацию.Поэтому любые изменения в ваших данных будут отражаться только тогда, когда изменились экземпляры ваших объектов.

Вам нужно подумать об неизменности и сознательно выбрать, когда клонировать ваши объекты, чтобы вызвать обновления.На сложных страницах, которые обрабатывают большое количество данных, это действительно может сильно повлиять на производительность.

Использование ngrx / store или ngxs может помочь в этом.

0 голосов
/ 11 октября 2018

Говоря о стороне API, почему бы не иметь вложенного Observable: 

class Order {
  idThatWillNeverChange: FooType;
  someChangingProperty$: Observable<SomeType>;
}

невозможно получить.Как именно вы сохраняете свои загруженные Order «живыми» (получая обновления), это другой вопрос.

...