javascript - 将参数传递给自定义 Kendo UI 通知组件

Question

我正在这里处理这个例子: https://www.telerik.com/kendo-angular-ui/components/notification/content/

在下面的代码中，在 show() 函数中，我想将数据传递给 CustomComponent。这可以做到吗？

import { Component, Output, Input, EventEmitter } from '@angular/core';
import { NotificationService, NotificationRef } from '@progress/kendo-angular-notification';


@Component({
    selector: 'custom-component',
    template: `
      <span>{{ message }}</span>
      <button class="k-button k-outline" (click)="ignoreNotification($event)">IGNORE</button>
    `
  })

export class CustomComponent {
    @Input() customData; // <--- DATA FROM PARENT. MY CODE
    @Output() public ignore: EventEmitter<any> = new EventEmitter();

    public message = 'Weather: Chance of rain today. There is a 40 percent chance of rain, mainly before 1 p.m.';

    public ignoreNotification(event: Event): void {
        event.preventDefault();
        this.ignore.emit();
    }

    // I'd like to obtain the data here when I go to use it.
    private myFunc() {
       const getsData = this.customData;
    }
}

@Component({
    selector: 'my-app',
    template: `
        <p>Show Custom Component rendered into warning type Notification</p>
        <button class="k-button" (click)="show()">Show</button>
    `
})
export class AppComponent {
    constructor(private notificationService: NotificationService) {}

    public show(): void {
        const notificationRef: NotificationRef = this.notificationService.show({
            content: CustomComponent,
            animation: { type: 'slide', duration: 200 },
            position: { horizontal: 'right', vertical: 'top' },
            type: { style: 'warning', icon: false },
            closable: false
        });

        if (notificationRef) {
            notificationRef.content.ignore
                .subscribe(() => notificationRef.hide());
        }
    }
}

Answer 1

不使用输入，只需创建公共(public)属性并使用内容设置它。

消息属性示例

注入(inject)组件内部:

 public message: string;

设置使用 notificationRef 上的内容:

 if (notificationRef) {
  const notificationContent = notificationRef.content as any;
  notificationContent.message = 'test';
}