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

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

我应该如何处理这个问题？我想了解事件侦听器的一种功能。主零部件中的模型更改后，重新加载当前子零部件。在MasterComponent的变量update上，ChildComponent将侦听更新并运行一些函数或再次调用一些API并重新加载ChildComponent

//路由
施工许可：路线=[
{
路径：“”，
重定向到：“登录”，
路径匹配：“已满”，
},
{path:'login'，component:LoginComponent}，
{path:'logout'，component:LogoutComponent}，
{
路径：“”，
组件：主组件，
canActivate:[AuthGuard]，
儿童：[
{path:'record/create'，component:RecordCreateComponent}，//为MasterComponent中的SelectedRestarant创建记录
{path:'record/'，component:RecordComponent}，//显示主组件中当前SelectedRestarant的所有记录
{path:'record/:id/update'，component:RecordUpdateComponent}，//显示表单以编辑具有id的记录
{path:'record/:id'，component:RecordComponent}，//显示具有id的记录详细信息
]
},
{路径：'**'，重定向到：'登录'}
];

//主组件
@组成部分({
选择器：'主'，
templateUrl:templateUrl，
styleUrls:[styleUrl1]
})
导出类MasterComponent实现AfterViewInit、OnInit{
餐厅：数组=[]；
用户：用户；
选择餐厅：餐厅；
构造函数（专用路由器：路由器，专用storageHelper:storageHelper）{
}
ngAfterViewInit（）{
}
恩戈尼尼特（）{
this.user=JSON.parse（this.storageHelper.getItem（'user'）；
this.restaurants=this.user.restaurants；
this.selectedRestaurant=this.restaurants[0]；
this.router.navigate（['/record/'+this.selectedRestarant.id]）；
}
onRestaurantChange（）{
this.router.navigate（['/record/'+this.selectedRestarant.id]）；
}
createRecord（）{
}
}

---

使用

@Input

将数据传递给子组件，然后使用

ngOnChanges

（）查看

@Input

是否在运行中更改。

在Angular上要更新包含其模板的组件，有一个简单的解决方案，在您的子组件上具有

@Input

属性，并将其添加到

@Component

装饰器

变更检测：变更检测策略。OnPush

如下所示：

从'@angular/core'导入{ChangeDetectionStrategy}；
@组成部分({
选择器：'主'，
templateUrl:templateUrl，
styleUrls:[styleUrl1]，
changeDetection:ChangeDetectionStrategy.OnPush
})
导出类子组件{
@Input（）数据：MyData；
}

这将完成所有检查输入数据是否已更改的工作，并重新呈现组件更新的答案

创建使用

ngOnChanges

的子组件

ChildComponent.ts:：

从'@angular/core'导入{Component，OnChanges，Input}；
从'@angular/router'导入{ActivatedRoute}；
@组成部分({
选择器：'子'，
templateUrl:'child.component.html'，
})
导出类ChildComponent实现OnChanges{
@Input（）子对象id；
构造函数（专用路由：ActivatedRoute）{}
ngOnChanges（）{
//使用子\u id创建标题
console.log（this.child_id）；
}
}

现在在主组件的模板中使用它，并将数据传递给子组件，如：

---

您可以将@input与ngOnChanges一起使用，以便在更改发生时查看更改

参考资料：

（或）

如果您想在多个组件或路由之间传递数据，请使用Rxjs方式

服务.ts

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class MessageService {
  private subject = new Subject<any>();

  sendMessage(message: string) {
    this.subject.next({ text: message });
  }

  clearMessages() {
    this.subject.next();
  }

  getMessage(): Observable<any> {
    return this.subject.asObservable();
  }
}

import { Component, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';

import { MessageService } from './_services/index';

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

export class AppComponent implements OnDestroy {
  messages: any[] = [];
  subscription: Subscription;

  constructor(private messageService: MessageService) {
    // subscribe to home component messages
    this.subscription = this.messageService.getMessage().subscribe(message => {
      if (message) {
        this.messages.push(message);
      } else {
        // clear messages when empty message received
        this.messages = [];
      }
    });
  }

  ngOnDestroy() {
    // unsubscribe to ensure no memory leaks
    this.subscription.unsubscribe();
  }
}

---

参考：

在我们无法控制子组件（如第三方库组件）的情况下

我们可以使用

*ngIf

和

setTimeout

从父组件重置子组件，而无需对子组件进行任何更改

.模板：

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

---

问题的主题是误导性的“在不重新加载父组件的情况下更改子组件”。您只需要正确设置路由器。这似乎不是父子问题。@jmachnik我想从子组件访问父变量，反之亦然。所有路由的父组件值都应该一致。当我将相同的值发送到输入时，这是否有效？？？@AbhishekEkaanth不确定，请检查它。但如果它基于setters，我认为“是”，但如果您通过引用手动设置它，则不应在模板中发生。它不是基于setters。但我将值更改为零，并传递了正确的值，但它没有work@AbhishekEkaanth那你就做错了。。检查示例，简化组件并进行调试。工作正常。但是如果要重新加载子组件，我必须调用ngOnInit方法？从使用ChangeDetectionStrategy.OnPush的组件中，依赖@Input（）的所有子组件都将update@CarlosE您只是停用更改检测。如何重新加载子组件？Afaik唯一有效的解决方案是通过实现onChanges手动更新子组件。

show:boolean = true

resetChildForm(){
   this.show = false;

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