当父组件上的变量发生更改时,重新加载子组件.Angular2

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

// 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在运行时更改.

Answer 2

在Angular上更新包含其模板的组件,有一个直接的解决方案,@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;
}

如果输入数据已更改并重新呈现组件,这将执行检查的所有工作

Answer 3

以防万一，当我们无法控制子组件时，例如第三方库组件。

我们可以使用*ngIf和setTimeout从父组件重置子组件，而无需对子组件进行任何更改。

。模板：

<child-component *ngIf="show"></child-component>
<button (click)="resetChildForm()"></button>

.ts:

show:boolean = true

resetChildForm(){
   this.show = false;

   setTimeout(() => {
      this.show = true
    }, 100);
}

Answer 4

@Vladimir Tolstikov的答案的更新

创建一个使用的子组件ngOnChanges。

ChildComponent.ts ::

import { Component, OnChanges, Input } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'child',
  templateUrl: 'child.component.html',
})

export class ChildComponent implements OnChanges {
  @Input() child_id;

  constructor(private route: ActivatedRoute) { }

  ngOnChanges() {
    // create header using child_id
    console.log(this.child_id);
  }
}

现在在MasterComponent的模板中使用它，并将数据传递给ChildComponent，例如：

<child [child_id]="child_id"></child>