Angular 6-компонентное переплетение - PullRequest
Новая
       10

Angular 6-компонентное переплетение

0 голосов
/ 19 июня 2020

У меня есть Angular Компонент с именем Dashboard. Этот компонент отображает страницу информационной панели с данными. Еще у меня есть компонент меню. Когда я нахожусь на странице панели инструментов, я нажимаю пункт меню, и открывается всплывающий экран. Всплывающее окно - это не что иное, как скрытый div, который можно сделать видимым / невидимым. Я добавил в это всплывающее окно новый элемент транзакции, сохранив его в базе данных и закрыв всплывающее окно после отображения информационного предупреждения.

Я хотел убедиться, что панель управления может обновлять sh или повторно связываться с новые добавленные данные сразу после нажатия кнопки «Сохранить» во всплывающем окне.

Я пробовал следующее: 1) Используйте Router.Navigate. URL-адрес моего браузера всегда был localhost: 4200 / Dashboard, и этот код, похоже, не перезагружает маршрут 

saveTransaction() {
this.addTnxBtn = true;
this.services.addTransaction(this.newTnx).subscribe((data) => {
  if (data.mStatus == "Success") {
    this.success = true;
    this.addTnxBtn = false;
    this.Failed = false;
    this.router.navigate(['/dashboard']);
  } else {
    this.success = false;
    this.Failed = true
    this.addTnxBtn = false;
  }
})

}

2) Воссоздайте компонент Dashboard и вызовите функцию для повторной привязки . Предполагается, что dbcomponent.ngOnInit вызывает службу api и повторно привязывает данные к Dashboard 

saveTransaction() {
this.addTnxBtn = true;
this.services.addNewSwiftTransaction(this.newTnx).subscribe((data) => {
  if (data.mStatus == "Success") {
    this.success = true;
    this.addTnxBtn = false;
    this.Failed = false;
    let dbcomponent = new DashboardComponent(this.services);
    dbcomponent.ngOnInit();

  } else {
    this.success = false;
    this.Failed = true
    this.addTnxBtn = false;
  }
})

} 

ngOnInit() {
this.count = new dashboardClass()
this.services.getDashboardCount().subscribe((data) => {
  if (data.mStatus == "Success") {
    this.dashData = data.responseData
  } else {
    console.log(data.mStatus)
  }
})

}

Итак, я застрял с вопросом, могу ли Я ссылаюсь на уже загруженный компонент Dashboard из моего компонента меню? Есть ли другие способы повторно загрузить компонент для повторной привязки?

Ответы [ 2 ]

2 голосов
/ 19 июня 2020

Что вам нужно, так это связь между компонентами.

  1. Создайте службу с BehaviourSubject и подпишитесь на нее в компоненте Dashboard, где вы сможете снова получить ответ.
  2. Всякий раз, когда вы добавляете новую запись из модального окна, испускайте значение, и вы получите сообщение на панели управления, где вы подписались, чтобы снова получить данные сетки.

Таким образом, вы также не придется перезагружать страницу.

0 голосов
/ 19 июня 2020

После выполнения своих задач вы можете использовать Router.Navigate, как указано ниже: 

constructor() {private _router: Router}
this._router.routeReuseStrategy.shouldReuseRoute = () => {
            return false;
 }; // to reload your component on same page
this._router.navigate(['/fsf']); // this will work
...