Привязка не работает в Angular после вызова функции из другого компонента

Question

У меня есть два компонента: компонент навигации, который является меню навигации приложения, и домашний компонент. Я звоню из домашнего компонента в функцию в навигационном компоненте. Вызов завершается успешно и изменяет свойство publi c компонента навигации. Это свойство c publi связано в шаблоне html. Но хотя свойство изменяет значение, значение в html остается прежним, то есть привязка не работает. Какой-то код для вас:

navigation.component.html:

<a href="">
    <img style="cursor:pointer" src="../assets/pics/cart.jpg" />
    <span id="CartTotal">{{cartTotal| currency: 'EUR'}}</span>
</a>

Здесь см. Привязку со свойством cartTotal

код функции навигации компонент, который обновляет это свойство и вызывается из домашнего компонента:

navigation.component.ts:

public getCartTotal() {    
    var url = this.baseUrl + "api/Ajax/GetCart";
    this.http.get<CartViewModel>(url).subscribe(res => { 
       console.log(res); 
       this.cartTotal = res.total }, 
       error => console.error(error));
}

и, наконец, то, что я написал в домашнем компоненте для вызова функции компонента навигации: home.component.ts:

import { NavMenuComponent } from '../nav-menu/nav-menu.component';

@Component({
  providers: [NavMenuComponent],
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor(private navmenu: NavMenuComponent, 
              private http: HttpClient, @Inject('BASE_URL') private baseUrl: string,
              private router:Router, private actRoute: ActivatedRoute) {
  }

// snip --

  AddToCart(productId, qty: number) {
    var cartlineReqModel: CartLineRequestModel = <CartLineRequestModel>{};
    cartlineReqModel.productId = productId;
    cartlineReqModel.quantity = qty;
    this.http.post(this.baseUrl + 'api/ajax/AddToCart', cartlineReqModel).subscribe(
      result => { console.log(result); this.navmenu.getCartTotal() },
      error => console.error(error))
  }

 // enter code here

}

код navigation.component.ts очень прост, вот он для тех, кто спросил:

import { Component, Inject, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-nav-menu',
  templateUrl: './nav-menu.component.html',
  styleUrls: ['./nav-menu.component.css']
})
export class NavMenuComponent implements OnInit{
  isExpanded = false;
  cartTotal: number = 0;
  constructor(@Inject('BASE_URL') private baseUrl: string, private http: HttpClient) {

  }

  ngOnInit() {
    this.getCartTotal();
  }

  public getCartTotal() {

    var url = this.baseUrl + "api/Ajax/GetCart";
    this.http.get<CartViewModel>(url).subscribe(res => { 
        console.log(res); 
        this.cartTotal = res.total }, 
        error => console.error(error));
   }

  collapse() {
    this.isExpanded = false;
  }

  toggle() {
    this.isExpanded = !this.isExpanded;
  }
}

Answer 1

Рабочая демонстрация в этой StackBlitz Link (с или без родительского-дочернего).

Рабочая демонстрация в этой StackBLitz Link (С родственным маршрутизатором-выходом).

Рабочая демонстрация в этом StackBLitz Link (Использование Serivce Communication).

Прежде всего вам нужно template-reference variable, определенное в navigation-component. так что наш родительский компонент будет таким ...

app.component. html

<app-navigation #appNav>
  <app-home [nav]="appNav"></app-home>
</app-navigation>

В приведенном выше коде <app-home> определено в <app-navigation>. и это называется контент-проекцией. Обратите внимание, что #appNav является переменной шаблона. appNav передается в качестве входных данных для компонента <app-home>, так что компонент навигации также может быть получен из домашнего компонента.

home.component. html

<button (click)="updateNav()">Update Nav</button>

home.component.ts

export class HomeComponent {
  @Input('nav') appNav;
  updateNav(){
    this.appNav.getTotal(2);
  }
}

Обратите внимание, что выше @Input() получает ссылку на компонент навигации, и мы обновим значение свойства компонента навигации с помощью метода updateNav() ,

navigation.component. html

<div>
  <span>{{total}}</span>
  <ng-content></ng-content>
</div>

navigation.compon enet .ts

export class NavigationComponent {
  total = 0;
  getTotal(totall?: number){
    console.log(totall);
    this.total = totall;
    console.log(this.total);
  }
}

Обратите внимание, что выше getTotal() метод вызывается из home.ts с использованием метода updateNav(), и этот метод вызывается и обновляет значение, непосредственно предоставленное домашним компонентом.

Надеюсь, все работает для вас.