Angular @Input 消息僅設置為第一次

Question

我有以下組件用於接收來自子組件的消息並顯示它：

TypeScript

import * as _ from 'lodash';
import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core';

/**
 * Admin Notification Component
 *
 * @export
 * @class NotificationComponent
 * @implements {OnInit}
 */
@Component({
    selector: 'manager-notification',
    templateUrl: 'notification.component.html'
})

export class NotificationComponent implements OnInit, OnChanges {

    /**
     * Alert message to show
     *
     * @type {string}
     * @memberof NotificationComponent
     */
    // @Input() public message: string | Array<string>;
    @Input() public message: any;


    /**
     * Component Init
     *
     * @memberof NotificationComponent
     */
    public ngOnInit(): void {
        this.initContent();
    }

    /**
     * Handle any changes
     *
     * @param {SimpleChanges} changes
     * @memberof NotificationComponent
     */
    public ngOnChanges(changes: SimpleChanges): void {
        this.initContent();
    }

    /**
     * Format message for alerts
     *
     * @returns {string}
     * @memberof NotificationComponent
     */
    public formatMessage(): string {

        // If message is an array
        if (_.isArray(this.message)) {
            return _.join(this.message, '<br />');
        }

        return this.message;
    }

    /**
     * Close notification
     */
    public close()
    {
        this.message = null;
    }

    /**
     * Initialize content
     *
     * @private
     * @memberof NotificationComponent
     */
    private initContent() {

        // Dismiss global notifications after 10 seconds
        if (this.message) {
            setTimeout(() => this.message = null, 5000);
        }
    }
}

模板

<div class="app-alert_layout" *ngIf="message">
    <div class="alert alert-success app-alert_layout-structure" role="alert" id="success_alert">
        <div class="d-flex justify-content-sm-between align-items-center app-alert_content-icon">
            <i class="material-icons app-alert_content-icon">info_outline</i>
            <p class="app-alert_content" [innerHTML]="formatMessage()">&nbsp;<br></p>
            <a class="alert-link app-alert_content-close" id="alert_close" href="JavaScript:void(0)" (click)="close()">
                <i class="material-icons app-alert_content-close-icon">close</i>
            </a>
        </div>
    </div>
</div>

現在在我的子組件模板中

<manager-notification [message]="noPermissionMessage"></manager-notification>

我在菜單點擊中設置noPermissionMessage文本如下：

if (this.noPermission) {
    this.noPermissionMessage ="Your current role doesn't allow this action !!";
    return false;
}

當我第一次點擊時，一切正常。 通知在指定時間后顯示並消失。 現在第二次，它沒有顯示通知。 它正在設置消息，但未顯示通知。 如何解決這個問題？

Answer 1

我想問題是noPermissionMessage沒有改變。

像這樣更改子組件中的代碼。

export class NotificationComponent implements OnInit, OnChanges {

/**
 * Alert message to show
 *
 * @type {string}
 * @memberof NotificationComponent
 */
// @Input() public message: string | Array<string>;
@Input() public message: string;
@Output() public messageChange = new EventEmitter<string>();  // CHANGE HERE


/**
 * Component Init
 *
 * @memberof NotificationComponent
 */
public ngOnInit(): void {
    this.initContent();
}

/**
 * Handle any changes
 *
 * @param {SimpleChanges} changes
 * @memberof NotificationComponent
 */
public ngOnChanges(changes: SimpleChanges): void {
    this.initContent();
}

/**
 * Format message for alerts
 *
 * @returns {string}
 * @memberof NotificationComponent
 */
public formatMessage(): string {

    // If message is an array
    if (_.isArray(this.message)) {
        return _.join(this.message, '<br />');
    }

    return this.message;
}

/**
 * Close notification
 */
public close()
{
    this.message = null;
}

/**
 * Initialize content
 *
 * @private
 * @memberof NotificationComponent
 */
private initContent() {

    // Dismiss global notifications after 5 seconds
    if (this.message) {
        setTimeout(() => this.messageChange.emit(null), 5000); // CHANGE HERE
    }
}
}

之后，您可以在組件上進行雙向數據綁定

<manager-notification [(message)]="noPermissionMessage"></manager-notification>

Answer 2

我認為您必須更改輸入的引用，因此請嘗試使用數組，例如：

this.noPermissionMessage =["Your current role doesn't allow this action !!"];