angular - 当父组件上的变量更改时重新加载子组件。 Angular 2

Question

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

我该如何解决这个问题？我想要事件监听器类型的功能。一旦 MasterComponent 中的模型发生变化，重新加载当前的子组件。在 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(){
    }
}

Answer 1

使用 @Input 将您的数据传递给子组件，然后使用 ngOnChanges ( https://angular.io/api/core/OnChanges ) 查看 @Input 是否更改即时。