从另一个组件单击按钮时如何刷新一个组件（导航栏）？答案

【问题标题】：How to refresh one component (nav-bar) when button is clicked from another component?从另一个组件单击按钮时如何刷新一个组件（导航栏）？
【发布时间】：2018-12-02 13:54:09
【问题描述】：

我想在单击另一个组件 Angular 6 的按钮后重新加载组件。

【问题讨论】：

添加一些代码可能有助于我们更好地了解您的问题。
使用 eventEmitter();在一个组件中触发 eventEmitter() 并在另一个组件中捕获它，触发刷新函数()。 :D
@AkhilAravind 能否提供一些示例代码
@MariyamMohammedJalil，我会尝试
相关（不确定是否重复，因为这个问题是关于导航栏的）stackoverflow.com/questions/47813927/…

标签： javascript angular rest angular6

【解决方案1】：

正如@MariyamMohammedJalil 所说，您可以使用 EventEmitter 来触发您的第一个组件的更新。

参见以下示例：

first.component.ts

@Component({
    selector: 'first-component',
    template: '<div>{{label}}</label>
})
export class FirstComponent {

    @Input() update: EventEmitter<string>;

    label = 'First Component';

    constructor() {}

    ngOnInit() {
        if (this.update) {
            // Subscribe to the event emitter to receive an update event
            this.update.subscribe((value: string) => {
                this.refresh(value);
            })
        }
    }

    refresh(value: string) {
        // Do your stuff here
        this.label = value;
    }

}

second.component.ts

@Component({
    selector: 'second-component',
    template: '<button (click)="updateFirstCmp()">Update First Component</button>'
})
export class SecondComponent {

    @Input() update: EventEmitter<string>;

    constructor(){}

    updateFirstCmp() {
        // Emit an event to update your first component
        this.update.emit('Updated First Component');
    }

}

例如，您应该将以下内容添加到您的app.component.ts：

updateEventEmitter: EventEmitter<string>;

constructor() {
    ...   
    this.updateEventEmitter = new EventEmitter();
}

在你的app.component.html:

<first-component [update]="updateEventEmitter"></first-component>

<second-component [update]="updateEventEmitter"

解决问题的另一种方法是输入first.component 作为second.component 的输入参数，以直接调用刷新函数而不使用EventEmitter。请参阅以下示例：

app.component.html

<first-component #firstComponent></first-component>

<second-component [firstCmp]="firstComponent"></second-component>

second.component.ts

@Component({
    selector: 'second-component',
    template: '<button (click)="updateFirstCmp()">Update First Component</button>'
})
export class SecondComponent {

    @Input() firstCmp: FirstComponent;

    constructor(){}

    updateFirstCmp() {
        // Update the first component directly
        this.firstCmp.refresh('Updated First Component');
    }

}

使用此示例，您无需订阅更新事件，因为您没有使用 EventEmitter。

【讨论】：