Обновить дочерний компонент при изменении переменных в родительском компоненте. Angular2

У меня есть MasterComponent, который загружает верхний колонтитул, нижний колонтитул, боковую панель и т. Д. В заголовке есть выпадающий список, параметры которого задаются после входа пользователя в систему. Я хочу, чтобы заголовок был постоянным, даже если я перехожу к различным маршрутам, которые загружаются другой дочерний компонент. Значит, что выбранная опция не должна меняться, а значение раскрывающегося списка должно быть доступно во всех дочерних компонентах. При изменении выпадающего значения текущий дочерний компонент должен быть обновлен/перезагружен.Обновить дочерний компонент при изменении переменных в родительском компоненте. Angular2

Как мне подойти к этой проблеме? Я хочу, чтобы функция-слушатель имела функциональность. После изменения модели из MasterComponent Changes перезагрузите текущий дочерний компонент. При обновлении переменной переменной MasterComponent ChildComponent будет прослушивать обновление и запускать некоторую функцию или снова вызвать некоторый API и перезагрузить ChildComponent.

// routes 
const appRoutes: Routes = [ 
    { 
     path: '', 
     redirectTo: 'login', 
     pathMatch: 'full', 
    }, 
    { path: 'login', component: LoginComponent }, 
    { path: 'logout', component: LogoutComponent }, 
    { 
     path: '', 
     component: MasterComponent, 
     canActivate: [AuthGuard], 
     children: [ 
      { path: 'record/create', component: RecordCreateComponent }, // create record for selectedRestaurant in MasterComponent 
      { path: 'record/', component: RecordComponent }, // shows all record of current selectedRestaurant in MasterComponent 
      { path: 'record/:id/update', component:RecordUpdateComponent }, // show form to edit record having id 
      { path: 'record/:id', component: RecordComponent }, // show record details having id 
     ] 
    }, 
    { path: '**', redirectTo: 'login' } 
];

// MasterComponent

@Component({ 
    selector: 'master', 
    templateUrl: templateUrl, 
    styleUrls:[styleUrl1] 

}) 
export class MasterComponent implements AfterViewInit, OnInit{ 
    restaurants: Array<Restaurant> = []; 
    user:User; 
    selectedRestaurant: Restaurant; 

    constructor(private router: Router, private storageHelper:StorageHelper){ 
    } 
    ngAfterViewInit() { 
    } 
    ngOnInit(){ 
     this.user = JSON.parse(this.storageHelper.getItem('user')); 
     this.restaurants = this.user.restaurants; 
     this.selectedRestaurant = this.restaurants[0]; 
     this.router.navigate(['/record/' + this.selectedRestaurant.id]); 
    } 
    onRestaurantChange(){ 
     this.router.navigate(['/record/' + this.selectedRestaurant.id]); 
    } 
    createRecord(){ 
    } 
}

источник

2016-10-26 Kaushal

Тема вопроса вводит в заблуждение «Измените дочерний компонент без перезагрузки родительского компонента». Вам просто нужно правильно настроить маршрутизатор. Кажется, что не проблема родителей <->. – jmachnik

@jmachnik Я хочу получить доступ к родительским переменным из дочернего компонента и наоборот. Значение родительских компонентов должно быть согласованным во всех маршрутах. – Kaushal

Использование @Input передать ваши данные в дочерних компонентов, а затем использовать ngOnChanges (https://angular.io/docs/ts/latest/api/core/index/OnChanges-class.html), чтобы увидеть, что если @Input изменен на лету.

источник

2016-10-27 13:07:00

Эта работа Когда я отправляю такое же значение на вход? –

@AbhishekEkaanth не уверен, проверьте. Но если он основан на сеттерах, я думаю, что «да», но если вы установите его вручную через ссылку, это не должно происходить в шаблоне. –

он не основан на setters.but я изменил значение на ноль и прошел правильный порог значения, он не работал –

На Угловом обновить компонент, включая его шаблон, существует прямое решение этой проблемы, имеющие свойство @Input на вашем ChildComponent и добавить в @Component декоратор changeDetection: ChangeDetectionStrategy.OnPush следующим образом:

import { ChangeDetectionStrategy } from '@angular/core'; 
@Component({ 
    selector: 'master', 
    templateUrl: templateUrl, 
    styleUrls:[styleUrl1], 
changeDetection: ChangeDetectionStrategy.OnPush 

}) 
export class ChildComponent{ 
    @Input() data: MyData; 
}

Это будет выполнять всю работу по проверке, если входные данные изменились и перезагрузить компонент

источник

2017-09-25 14:20:48

Обновить дочерний компонент при изменении переменных в родительском компоненте. Angular2

ответ

Смежные вопросы