当父组件上的变量更改时，重新加载子组件.角度2 [英] Reload child component when variables on parent component changes. Angular2

问题描述

我有一个MasterComponent可以加载页眉，页脚，侧边栏等.在页眉上有一个下拉菜单，用户登录后即可设置其选项.即使我导航到加载的不同路线，我也希望页眉保持不变不同的子组件.意味着所选选项不应更改，并且下拉菜单的值应可在所有子组件中访问.下拉值更改后，当前子组件应被更新/重新加载.

I have a MasterComponent which loads header, footer, sidebar etc. On the header there is a dropdown whose options are set once the user is logged in. I want the header to be constant even if I navigate to different routes which loads different child component. Means that the selected option should not change and value of dropdown should be accessible in all the child component. Onchange of dropdown value the current child component should be updated/reloaded.

我应该如何解决这个问题?我想要事件监听器的某种功能.一旦MasterComponent中的模型发生更改，请重新加载当前的子组件.在MasterComponent的变量变量update上，ChildComponent将侦听更新并运行某些功能或再次调用某些API，然后重新加载ChildComponent.

How should I approach this problem? I want to event-listener kind of functionality. Once the model from MasterComponent Changes , reload the current child component. On MasterComponent's variable variable update ChildComponent will listen to the update and run some function or call some API again and reload the 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(){
    }
}

推荐答案

使用@Input将数据传递给子组件，然后使用ngOnChanges(

Use @Input to pass your data to child components and then use ngOnChanges (https://angular.io/api/core/OnChanges) to see if that @Input changed on the fly.

这篇关于当父组件上的变量更改时，重新加载子组件.角度2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！